Promise链式调用和解决回调地狱的ES7终极解决方法async,await

promise链式调用

**then 是成功回调,只要在then后边return一个promise就可以继续then**<script type="text/javascript">let p1=new Promise(function(resolve,reject){setTimeout(function(){resolve()//成功回调// reject()//失败回调},2000)//2秒后执行后边的then、catch函数})p1.then(function(res){console.log("成功执行then"+res)// 在准备第二个promise对象let p2=new Promise(function(resolve,reject){setTimeout(function(){resolve()},1000)})return p2}).then(function(){console.log("我是p1 then后边的第二个then")})p.catch(function(){console.log("失败执行catch")})</script>

解决回调地狱的终极方法 async/await ES7的语法,可以通过 async/await让代码看起来像同步的

async异步 await等待
await 等待 就是当后面跟的是promise对象,就让他停止 ,先让里面的异步事情做完,在把结果返回给前面的新变量,在继续向后执行
他只生效当前作用域内部,也就是async函数内部。
pGetSend 是一个异步的ajax请求
await会等待这个异步函数请求结束,并把结果给前面的res变量以后,在向后执行代码。

async/await 语法
async/await 是es7的新增语法,是为promise设计的语法。
是回调地狱的终极解决方案,就是用async/await语法把–异步代码写的看起来像同步的代码。
 

 语法规范:1 async关键字写在--函数的前面,就把该函数变成了一个异步函数2 await是一个写在 异步函数里面的关键字3 await关键字后面的必须是一个promise对象满足以上三个条件,就可以把本该在promise的then回调里面接受的结果 ,放在await关键字前面定义一个变量来接受了。 
**语法: async 必须写在函数前边await 关键字 后边必须跟着Promise对象async function fn(){}****<!-- 语法兼容可以借助babel 直接百度即可 -->**<script type="text/javascript">function pGetSend(url){let p=new Promise(function(resolve,reject){let xhr=new XMLHttpRequest()xhr.open('get',url)xhr.onload=function(){resolve(xhr.responseText)}xhr.send()})return p}async function fn(){// 1请求1 let res =await pGetSend("url.php")let result=JSON.parse(res)console.log("1"+res)// 2 次let res2=await pGetSend("url.php?key=value&key1=vlaue1")let result2=JSON.parse(res2)console.log("2"+res2)}fn ()</script>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247379.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1.MySQL目录结构

分为两个目录&#xff1a; 1.安装目录&#xff1a; 2.数据目录&#xff1a; 在Linux下 yum安装mysql后使用 find / -name my.cnf 找到mysql数据文件的位置 转载于:https://www.cnblogs.com/sdrbg/p/11237231.html

对promise.all底层的实现的研究

1.Promise.all(iterable)返回一个新的Promise实例,此实例在iterable参数内素有的Promise都fulfilled或者参数中不包含Promise时&#xff0c;状态变成fulfilled。 如果参数中Promise有一个失败rejected &#xff0c;此实例回调失败&#xff0c;失败原因的是第一个失败Promise的返…

vue-provide/inject轻松实现跨级访问祖先组件

provide&#xff1a;Object | () > Object inject&#xff1a;Array<string> | { [key: string]: string | Symbol | Object } provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。 这对选项需要一起使用&#x…

python 操作redis,存取为字节格式,避免转码加

这种情况连接数据库&#xff0c;对数据的存取都是字节类型&#xff0c;存取时还得转码一下 from redis import Redis# 实例化redis对象rdb Redis(hostlocalhost, port6379, db0,passwordaaa123) rdb.set(name, root) name rdb.get(name) print(name)为了避免上述情况&#x…

element ui table scrollTop 滚动到行头或行尾

1.设置table的ref为tableList2.设置滚动至顶部this.$refs.tableList.bodyWrapper.scrollTop 0;3.设置滚动至底部this.$refs.tableList.bodyWrapper.scrollTop this.$refs.tableList.bodyWrapper.scrollHeight;//如果请求完更新数据&#xff0c;需要使用$nextTick this.$nextTic…

Element-UI中Drawer抽屉去除标题自带蓝色框

当点击事件drawertrue时&#xff0c;抽匣回打开 这时抽匣的标题会出现一个难看的蓝色边框&#xff0c;一会就会消失&#xff0c;但是好丑&#xff0c;所以要去掉它 解决方法 /deep/ :focus {outline: 0;} vue组件中&#xff0c;在style设置为scoped的时候&#xff0c;里面在…

Java生鲜电商平台-B2B生鲜的互联网思维

Java生鲜电商平台-B2B生鲜的互联网思维 在互联网高速发展的今天&#xff0c;为我们的生活带来了众多便利。然而互联网从早期的萌芽状态到现在妇孺皆知&#xff0c;它的崛起速度远远超乎世人的想象。人们开始关注互联网并且研究它&#xff0c;而思维模式的研究则是从深层次研究事…

Java生鲜电商平台-高并发核心技术订单与库存实战

Java生鲜电商平台-高并发核心技术订单与库存实战 一、 问题 一件商品只有100个库存&#xff0c;现在有1000或者更多的用户来购买&#xff0c;每个用户计划同时购买1个到几个不等商品。 如何保证库存在高并发的场景下是安全的&#xff1f; &#xff08;1&#xff09;不多发 &…

Vue2 MVVM 双向绑定(数据劫持+发布者-订阅者模式)

参考文献&#xff1a;https://www.cnblogs.com/libin-1/p/6893712.html https://juejin.im/post/5b2f0769e51d45589f46949e MVVM拆开来即为Model-View-ViewModel&#xff0c;有View&#xff0c;ViewModel&#xff0c;Model三部分组成。View层代表的是视图、模版&#xff0c;负…

常用的激活函数

1.阶跃函数 &#xff0c;值域{0,1} 1 def step_function(x): 2 return np.array(x>0,dtypenp.int) 2.sigmoid函数 &#xff0c;值域(0,1) 1 def sigmoid(x): 2 return 1/(1np.exp(-x)) 3.relu函数 &#xff0c;值域[0&#xff0c;∞&#xff09; 1 def relu(x): 2 …

前端优化-vue-cli4安装webpack-bundle-analyzer分析包文件

使用vue-cli3创建了一个工程目录&#xff0c;技术栈为vue-cli3vue-routervuexelement-uiv-chartsaxios。但是等到项目开发完后&#xff0c;发现生成的app.js特别大&#xff0c;接近10M。为了优化项目性能&#xff0c;需要使用webpack-bundle-analyzer分析包文件&#xff0c;找出…

今天刚查到的宏,学习

PVP常用的宏&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&…

不要再问我三次握手和四次挥手

三次握手和四次挥手是各个公司常见的考点&#xff0c;也具有一定的水平区分度&#xff0c;也被一些面试官作为热身题。很多小伙伴说这个问题刚开始回答的挺好&#xff0c;但是后面越回答越冒冷汗&#xff0c;最后就歇菜了。 见过比较典型的面试场景是这样的: 面试官&#xff1…

Apache ServiceComb

Apache ServiceComb 开源&#xff0c;全栈微服务解决方案。开箱即用&#xff0c;高性能&#xff0c;兼容流行的生态&#xff0c;多语言支持 ServiceComb是一个微服务框架&#xff0c;提供服务注册&#xff0c;发现&#xff0c;配置和管理实用程序。 下载 &#xff1a;http://se…

VScode PowerShell运行脚本报错禁止运行脚本解决方式图文

今天在新Windows电脑上用VScode的终端PowerShell运行一个脚本的时候&#xff0c; 错误 在vscode终端运行vue -V查看版本失败 PS C:\Users\11388> vue -V vue : 无法加载文件 E:\NodeJs\node_global\vue.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xf…

多线程的创建方式---继承Thread和实现Runnable

继承Thread类创建多线程 1 package cn.ftf.thread;2 /**3 * 多线程实现方式一 继承Thread实现多线程&#xff0c;继承Thread&#xff0c;重写run方法4 * author 房廷飞5 *6 */7 public class StartThread extends Thread{ //对象继承Thread8 public static void mai…

添加右键用Sublime Text3 打开文件和文件夹

最近重新装了一下系统&#xff0c;右键没有用Sublime Text 3打开的选项了&#xff0c;于是查了一下解决方案 1、环境 Win10和Win7都可以Sublime Text 3最新版本以下为Win10系统下截图 2、添加右键打开文件 Win R&#xff0c;输入regedit,打开注册表 找到HKEY_CLASSESS_ROOT…

Windows Mobile Widget Emulator

今天Vimpyboy 在codeplex发布了Windows Mobile Widget Emulator。这是一个用来调试Windows Mobile 6.5 Widget的工具&#xff0c;我在做Windows Mobile 6.5 新功能widget开发 的时候就发现调试Widget很麻烦。也有想法做一个Emulator&#xff0c;其实这个Emulator目标很明显&…

JS 常用字符串数组遍历函数方法整理

目录 一、concat() 二、join() 三、push() 四、pop() 五、shift() 六、unshift() 七、slice() 九、substring() 和 substr() 十、sort 排序 十一、reverse() 十二、indexOf 和 lastIndexOf 十三、every 十四、some 十五、filter 十六、map ES6新增新操作数组的…

AttributeError: Can only use .str accessor with string values, which use np.object_ dtype in pandas

忘记网址了…… 问题&#xff1a; 分析思路与解决方法&#xff1a; 转载于:https://www.cnblogs.com/bravesunforever/p/11247988.html