async/await的深入总结

2023年10月16日 222次阅读 来源: Mr无愧于心

—async和await是干什么用的—

—语义—

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()//调用这个函数

—小试牛刀—

  • 一般用法（模拟同步写法）
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);
});

—关于async 函数—

async 函数就是 Generator 函数的语法糖。
对比generator ： async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。

const fs=require('fs');
function readFile(url){
    return new Promise(function (resolve, reject) {
        fs.readFile(url,'utf-8', function (err, data) {
            if(err)reject(err);
            resolve(data);
        })
    })
}
function* read(){//generation函数
    const f1=yield readFile('../17.promise原理/201808-promise/1.txt');
    const f2=yield readFile('../17.promise原理/201808-promise/2.txt');
    console.log(f1,'Generator');
    console.log(f2,'Generator');
}

//async
async function read2(){
    const f1=await readFile('../17.promise原理/201808-promise/1.txt');
    const f2=await readFile('../17.promise原理/201808-promise/2.txt');
    console.log(f1,'async');
    console.log(f2,'async');
}
read2()

async函数对 Generator 函数的改进

  1. Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器，async函数的执行，与普通函数一模一样。
  2. 更好的语义
  3. co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。
  4. 返回值是 Promise，比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作
    async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。
  • async 函数有多种使用形式。(async后面必须紧跟着函数)
// 函数声明
async function foo() {}

// 函数表达式
const foo = async function () {};

// 对象的方法
let obj = { async foo() {} };
obj.foo().then(...)

// Class 的方法
class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }

  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}

const storage = new Storage();
storage.getAvatar('jake').then(…);

// 箭头函数
const foo = async () => {};

错误处理机制

  • 产生错误的情况：async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态，会阻断后续代码的执行。
async function fn(){
 throw new Error('err')//抛出错误，阻断代码执行
 console.log('上边抛出错误')
}
fn()

async function fn2(){
    await new Promise(function (resolve, reject) {//抛出错误，阻断代码执行
        reject('err2');
    })
  console.log('上边抛出错误')
}
fn2()
  • async处理错误有两种方式
//处理错误最常用的方式try catch
async function fn(){
    try{
        await new Promise(function (resolve, reject) {
            reject('err')
        })
    }catch(err){
        console.log('上边抛出错误'+err)
    }

}
fn()
//用catch捕捉错误(因为async返回的是一个promise)
//内部捕捉
async function fn2(){
    await new Promise(function (resolve, reject) {
        reject('err2')
    }).catch(function (err) {
            console.log('上边抛出错误'+err)
        })
    console.log('这接着执行')
}
fn2()
//外部捕捉
async function fn3(){
    await new Promise(function (resolve, reject) {
        reject('err3')
    })
    console.log('这就不执行了')
}
fn3().catch(function (err) {
    console.log('上边抛出错误'+err)
})

await 命令

  1. 正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。个人认为：只有后面接一个Promise对象或thenable时await才会有意义
async function f() {
  // 等同于
  // return 123;
  return await 123;
}

f().then(v => console.log(v))
// 123  then中的回调都是异步的（来源于promiseA+规范）
  1. await命令后面是一个thenable对象（即定义then方法的对象），那么await会将其等同于 Promise 对象
//回想一下手写封装的promise原理中的resolvePromsie对象，判断的就是thenable时，递归判断
//任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。
async function f() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}

使用注意点

  1. 前面已经说过，await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try…catch代码块中。
  2. 多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。
//独立的异步操作（不相互依赖的情况）
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 写法二
let fooPromise = getFoo();
let barPromise = getBar();

let foo = await fooPromise;
let bar = await barPromise;
//以上两种都是并发的方式，效果一样
  1. 异步函数之间相互依赖，需要继发执行
// 写法一
async function main() {
    var foostr = await getFoo();
    var barstr = await getBar();
    console.log(foostr )
    console.log(barstr);
}
main()
// 写法二
async function main2() {
    let docs = [getFoo, getBar];
    for (let doc of docs) {
        var str = await doc();
        console.log(str);
    }
}
main2()

//对比并发和继发执行的不同
  1. await命令只能用在async函数之中，如果用在普通函数，就会报错
  2. async 函数可以保留运行堆栈。（不太清楚用途）

—实现原理—

async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。

async function fn(args) {
  // ...
}

// 等同于

function fn(args) {
//spawn这个自动执行器，执行一个generation
  return spawn(function* () {
    // ...
  });
}

//自动执行器

function spawn(genF) {
  return new Promise(function(resolve, reject) {
    const gen = genF();
    function step(nextF) {
      let next;
      try {
        next = nextF();
      } catch(e) {
        return reject(e);
      }
      if(next.done) {
        return resolve(next.value);
      }
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v); });
      }, function(e) {
        step(function() { return gen.throw(e); });
      });
    }
    step(function() { return gen.next(undefined); });
  });
}

关于执行顺序的问题

async function async1 () {
  console.log('async1 start')
  await async2();
  console.log('async1 end')
}
 
async function async2 () {
  console.log('async2')
}
 
console.log('script start')
 
setTimeout(function () {
  console.log('setTimeout')
}, 0)
 
async1();
 
new Promise (function (resolve) {
  console.log('promise1')
  resolve();
}).then (function () {
  console.log('promise2')
})
 
console.log('script end')

关于执行顺序的注意事项：

  代码执行顺序，从上到下，从左到右，同步>>异步，微任务>>宏任务
  then的回调属于微任务
  计时器等异步属于宏任务
  await下边的代码都是异步执行的
  return await 123  等价  return 123 ，下边的代码不执行
  promise的状态不改变，then中的回调不执行

—对比Promise,co,async/await的区别—

  • 1.promise
    链式调用，避免回调地狱（连环嵌套）
    每次then拿取返回值不能跨then拿取数据，只能拿到当前的上一个传下来的
    new Promise(...).then(res1=>{}).then(res2=>{}).then(res3=>{这里想要用res1需要一步一步传下来才行})

  • 2.co
    需要引用插件，依赖generator

  • 3.async/await()—-最好用！！！！
    ES7 中更加标准的解决方案（需要babel）。
    语法简洁，代码优雅
    每次都能拿到异步函数的返回值，避免嵌套

    原文作者：Mr无愧于心
    原文地址: https://www.jianshu.com/p/0589cda11deb
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞