async/await

Posted 2021-10-12 前端纸飞机

是es7推出的一套关于异步的终极解决方案。用同步的思维来解决异步问题。

更多异步解决方案可见：❤️前端异步解决方案大全最新版❤️(2021版)_纸飞机博客-CSDN博客

async

1，async作为关键字放到函数前面，用于表示函数是一个异步函数。该函数的执行不会阻塞后面代码的执行。

2，async函数返回的是一个promise对象，可以调用then方法获取到promise的结果值。

3，async返回promise原理：如果async函数中有返回一个值，当调用该函数时，内部会调用Promise.resolve()方法把它转化成一个promise对象作为返回。

async function timeout() {
    return 'hello world'
}
    
timeout().then(result => {
    console.log(result);}
)
    
console.log('先执行')
    
//先执行  
// hello world

await

1，await操作符用于等待一个promise对象，其后必须跟promise对象(不是的话也会强制转化)。代码需要等待promise有了返回结果之后，才继续执行下面的代码。

2，await关键字只能放async函数里面。 而async函数里不是必须有await。

3，await关键字的返回结果就是其后 promise执行的结果值，是resolved或者 rejected后的值。

// 2s之后返回双倍的值
function double(num) { 
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        },2000);
    })
}
async function test() { 
    let result = await double(30);
    console.log(result);
}
test();

//2s 之后，输出60

async/await

异步代码就像写同步代码一样，也避免了回调地狱。

async function testTwo() {
  let first = await double(30);
  let second = await double(50);
  let third = await double(30);
  console.log(first + second + third);
}

testTwo();

6秒后，控制台输出220。

async/await 原理

async/await语法糖利用Generator函数 +自动执行器来运作，await类似yield，但 await 后需跟promise。

generator生成的迭代器是手动调用next直到return，而async/await自带执行器，是自动next。其时机是当await后的promise有结果时则自动调用next(即开始下一个 promise)，并将当前promise结果值传递给next为参数作为上一个yield (await)的返回值。

所以，async/await 是基于 Promise 的 Generator的自动执行。

//异步函数需包装成promise对象
function readFile(fileName) {
  return new Promise((resolve, reject) => {
    fs.readFile(fileName, (error, data) => {
      if (error) {
        reject(error);
      } else {
        resolve(data);
      }
    });
  });
}
// Generator函数
let gen = function* () {
  let rl = yield readFile("./package.json");
  console.log(rl.toStringO);
  let r2 = yield readFile("./index.js");
  console.log(r2.toString());
};
//自动执行器
function run(gen) {
  let g = gen();
  function _next(data) {
    let result = g.next(data);
    if (result.done) {
      return result.value;
    }
    result.value.then((data) => _next(data));
  }
  _next();
}
//调用
run(gen);