Shun 发表于 2021-12-13 11:04:53

async/await 优雅永不过时

引言​​async/await​​是非常棒的语法糖,可以说他是解决异步问题的最终解决方案。从字面意思来理解。async 是​​异步​​的意思,而 await 是 ​​等待​​ ,所以理解 async用于申明一个function是异步的,而 await 用于等待一个异步方法执行完成。


async作用​​async​​声明function是一个异步函数,返回一个​​promise​​对象,可以使用 then 方法添加回调函数。​​async​​函数内部​​return​​语句返回的值,会成为​​then​​方法回调函数的参数。

async function test() {return 'test';}console.log(test); // async函数是[`AsyncFunction`]构造函数的实例console.log(test()); // Promise { 'test' }// async返回的是一个promise对象test().then(res=>{console.log(res); // test})// 如果async函数没有返回值 async函数返回一个undefined的promise对象async function fn() {console.log('没有返回');}console.log(fn()); // Promise { undefined }// 可以看到async函数返回值和Promise.resolve()一样,将返回值包装成promise对象,如果没有返回值就返回undefined的promise对象复制代码
awaitawait 操作符只能在异步函数 async function 内部使用。如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果,也就是说它会阻塞后面的代码,等待 Promise 对象结果。如果等待的不是 Promise 对象,则返回该值本身。
async function test() {return new Promise((resolve)=>{    setTimeout(() => {      resolve('test 1000');    }, 1000);})}function fn() {return 'fn';}async function next() {    let res0 = await fn(),      res1 = await test(),      res2 = await fn();    console.log(res0);    console.log(res1);    console.log(res2);}next(); // 1s 后才打印出结果 为什么呢 就是因为 res1在等待promise的结果 阻塞了后面代码。复制代码
错误处理如果​​await​​后面的异步操作出错,那么等同于​​async​​函数返回的 Promise 对象被​​reject​​。
async function test() {await Promise.reject('错误了')};test().then(res=>{console.log('success',res);},err=>{console.log('err ',err);})// err 错误了复制代码防止出错的方法,也是将其放在​​try...catch​​代码块之中。

async function test() {try {    await new Promise(function (resolve, reject) {      throw new Error('错误了');    });} catch(e) {      console.log('err', e)}return await('成功了');}复制代码多个​​await​​命令后面的异步操作,如果不存在继发关系(即互不依赖),最好让它们同时触发。

let foo = await getFoo();let bar = await getBar();// 上面这样写法 getFoo完成以后,才会执行getBar// 同时触发写法 ↓// 写法一let = await Promise.all();// 写法二let fooPromise = getFoo();let barPromise = getBar();let foo = await fooPromise;let bar = await barPromise;复制代码
async/await优点async/await的优势在于处理由多个Promise组成的 then 链,在之前的Promise文章中提过用then处理回调地狱的问题,async/await相当于对promise的进一步优化。 假设一个业务,分多个步骤,且每个步骤都是异步的,而且依赖上个步骤的执行结果。
// 假设表单提交前要通过俩个校验接口async function check(ms) { // 模仿异步   return new Promise((resolve)=>{    setTimeout(() => {      resolve(`check ${ms}`);    }, ms);})}function check1() {console.log('check1');return check(1000);}function check2() {console.log('check2');return check(2000);}// -------------promise------------function submit() {console.log('submit');// 经过俩个校验 多级关联 promise传值嵌套较深check1().then(res1=>{    check2(res1).then(res2=>{       /*      * 提交请求      */    })})}submit();// -------------async/await-----------async function asyncAwaitSubmit() {    let res1 = await check1(),      res2 = await check2(res1);      console.log(res1, res2);      /*      * 提交请求      */}复制代码
原理async 函数的实现原理,就是将 Generator 函数和自动执行器,包装在一个函数里。
async function fn(args) {// ...}// 等同于function fn(args) {return spawn(function* () {    // ...});}复制代码/** Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。* 异步操作需要暂停的地方,都用 yield 语句注明* 调用 Generator 函数,返回的是指针对象(这是它和普通函数的不同之处),。调用指针对象的 next 方法,会移动内部指针。* next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法,会返回一个对象,表示当前阶段的信息( value 属性和 done 属性)。value 属性是 yield 语句后面表达式的值,表示当前阶段的值;done 属性是一个布尔值,表示 Generator 函数是否执行完毕,即是否还有下一个阶段。*/// 了解generator的用法function* Generator() {yield '1';yieldPromise.resolve(2);return 'ending';} var gen = Generator(); // 返回指针对象 Object {}let res1 = gen.next();console.log(res1); // 返回当前阶段的值 { value: '1', done: false }let res2 = gen.next();console.log(res2); // 返回当前阶段的值 { value: Promise { 2 }, done: false }res2.value.then(res=>{console.log(res); // 2})let res3 = gen.next();console.log(res3);// { value: 'ending', done: true }let res4 = gen.next();console.log(res4); // { value: undefined, done: true }复制代码Generator实现async函数

// 接受一个Generator函数作为参数function spawn(genF) {// 返回一个函数return function() {   // 生成指针对象   const gen = genF.apply(this, arguments);   // 返回一个promise   return new Promise((resolve, reject) => {          // key有next和throw两种取值,分别对应了gen的next和throw方法          // arg参数则是用来把promise resolve出来的值交给下一个yield          function step(key, arg) {            let result;                // 监控到错误 就把promise给reject掉 外部通过.catch可以获取到错误                try {                  result = gen(arg)                } catch (error) {                  return reject(error)                }                // gen.next() 返回 { value, done } 的结构                const { value, done } = result;                if (done) {                      // 如果已经完成了 就直接resolve这个promise                      return resolve(value)                } else {                      // 除了最后结束的时候外,每次调用gen.next()                      return Promise.resolve(                        // 这个value对应的是yield后面的promise                        value                      ).then((val)=>step("next", val),(err) =>step("throw", err))                }          }          step("next")   })}}复制代码测试

function fn(nums) {return new Promise(resolve => {    setTimeout(() => {      resolve(nums)    }, 1000)})}// async 函数async function testAsync() {let res1 = await fn(1);console.log(res1); // 1let res2 = await fn(2);console.log(res2); // 2return res2;}let _res = testAsync();console.log('testAsync-res',_res); // Promise_res.then(v=>console.log('testAsync-res',v)) // 2// Generator函数function* gen() {let res1 = yield fn(3);console.log(res1); // 3let res2 = yield fn(4);console.log(res2); // 4// let res3 = yield Promise.reject(5);//console.log(res3);return res2;}let _res2 = spawn(gen)();console.log('gen-res',_res2); // Promise_res2.then(v=>console.log('gen-res',v)) // 4.catch(err=>{console.log(err)}) // res3 执行会抛出异常复制代码

最后
如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163相互学习,我们会有专业的技术答疑解惑
如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star: ​​https://gitee.com/ZhongBangKeJi/CRMEB​​不胜感激 !


https://blog.51cto.com/u_14887126/4690024
页: [1]
查看完整版本: async/await 优雅永不过时