关于async/await的总结
标签:
JavaScript
---async和await是干什么用的---
一句话:是用来解决异步流程问题的。
避免回调地狱(callback hell),且以最接近同步代码的方式编写异步代码
async/await是对co模块的升级,内置生成器函数的执行器,不再依赖co模块。
---语义---
async 可以声明一个异步函数,此函数需要返回一个 Promise 对象。await可以等待一个 Promise 对象 resolve,并拿到结果。
function aaa(){ return new Promise((resolve) => {//返回一个promise对象 setTimeout(function(){//这里使用计时器模拟异步,也可以使用ajax,node异步读写等。。 resolve(123); //异步执行resolve函数 },2000) }) } async function getaaa(){ let a=await aaa();//等待aaa函数的执行结果 console.log(a)//拿到执行的返回值 } getaaa()//调用这个函数
---async和await的用法---
一般用法(模拟同步写法)
var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { resolve();//也可以把resolve写在sjax的sussess的回调中,都是异步调取 }, time); }) };var start = async function () { // 在这里使用起来就像同步代码那样直观 console.log('start');//立即打印start await sleep(3000);//等待三秒 console.log('end');//三秒后打印end }; start();
async函数捕捉异常(也可以用promise对象链上的catch方法)
var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { // 模拟出错了,返回 ‘error’ reject('error'); }, time); }) };var start = async function () { try { console.log('start'); await sleep(3000); // 这里得到了一个返回错误 // 所以以下代码不会被执行了,会走catch console.log('end'); } catch (err) { console.log(err); // 这里捕捉到错误 `error` } };
并行(依赖于Promise.all方法)
let count = ()=>{ return new Promise((resolve,reject) => { setTimeout(()=>{ resolve(100); },500); }); }let list = ()=>{ return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve([1,2,3]); },500); }); }let getList = async ()=>{ let result = await Promise.all([count(),list()]); return result; }//调用getList().then(result=> { console.timeEnd('begin'); //begin: 505.557ms后才执行 console.log(result); //[ 100, [ 1, 2, 3 ] ]}).catch(err=> { console.timeEnd('begin'); console.log(err); });
对比Promise,co,async/await的区别
1.promise
链式调用
避免回调地狱(连环嵌套)
每次then拿取返回值不能跨then拿取数据,只能拿到当前的上一个传下来的new Promise(...).then(res1=>{}).then(res2=>{}).then(res3=>{这里想要用res1需要一步一步传下来才行})
2.co
需要引用插件
依赖generator3.async/await()----最好用!!!!
ES7 中更加标准的解决方案(需要babel)。
语法简洁,代码优雅
每次都能拿到异步函数的返回值,避免嵌套
作者:Mr无愧于心
链接:https://www.jianshu.com/p/0589cda11deb
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦