【js】js 异步机制详解 Generator / Async / Promise

三种语法功能放在一起，是因为他们都有相似特点：

• 维护某种状态
• 在未来恢复状态并执行

本文重点回答以下几个问题：

• 为什么 Generator 和 Async 函数的 代码执行流 都可以简化成树形结构？
• async 函数为什么返回一个 promise？返回了怎样一个 promise？
• async 函数如何优雅的转换成 promise 函数？
  Generator 用法和思考

基本生成器

generator 是生成器，从生成器的行为来看，它就是一个迭代器。

function* foo(end) {
   
    var idx = 0;
    while (idx < end) {
   
        yield idx; // 保存当前状态并返回 当前idx
        idx += 5;
    }
}


const iterator = foo(20);
// iterator.next().value 手动迭代
for (let val of iterator） {
    // 输出 0 到 19
    console.log(val);
}

对应到生成器函数中，他会在 yield 的时候保存当前函数的状态。那么，函数的状态保存在哪？ 习惯了 C 函数的我们很难想象如何将状态保存在函数中。可能协程和 setjmp/longjmp 可以辅助我们思考生成器的实现，但还是不能直接对应到生成器函数的行为。比如：生成器需要记录如下信息

• Idx 的大小， end 大小
• pc 指针在 第 5 行

想在 c 语言中保存上述信息是不容易的。是因为函数在 js 是第一类值，上述的信息便可以保存在函数值本身内。对应quickjs 相当于将 pc 指针 和 参数 信息，local_buf，保存在对应的函数对象 (实际上保存在 StackFrame 中) 内，而 cur_ref 信息 quickjs 本身就已经保存了。而 c/c++ 语言的函数没有类似功能。

嵌套多层迭代器

• 树形生成器结构。讲 yield 这种语法，是因为它跟 async 的执行流非常像，但会可以看到
• 使用树形生成器生成 0 ~ 20 的值
  

function* inner(index) {
   
  var i = 0;
  while (i < 5) {
   
      yield index + i;
      i++;
  }
}

// 错误的生成器用法，但是启发我们思考，这样的用法，是不是很像 await?
// function* foo(index) {
   
//   while (index < 20) {
   
//     yield inner(index);
//     index += 5;
//   }
// }

// 正确版本
function* foo1(index) {
   
    while (index < 20) {
   
        var it = inner(index);
        for (let val of it) {
   
            yield val;
        }
        index += 5;
    }
}

// 语法糖版本
function* foo2(index) {
   
   while (index < 20) {
   
     yield *inner(index);
     index += 5;
   }
}


const iterator = foo1(0);

for (let val of iterator) {
   
    console.log(val);
}

async 执行流的思考

• Async 的代码执行流程是下面这棵树的中序遍历

• Async 函数的代码执行流程如下

  • 先执行绿色部分代码，直到最底层的 promise，由于promise 测试未决定(pending 状态)，整个函数暂停退出。
  • promise resolve或reject 后，恢复中序遍历执行淡蓝色部分代码，直到下一个 promise。这里相当于执行了 promise 的 then 回调。
    • Plus. 这里仍然有一次 暂停执行。因为 新的 promise 是 pending 状态。
  • 新的 promise resolve或reject 后，继续恢复执行 。。。。
  • Async 函数的结尾的 return 道理上相当于一个 then 回调

• Async 函数的代码执行流程非常像 树形 generator

• 都说 async 函数返回一个 promise，它返回的 promise 到底是什么？
  

• Async 函数框架

async function asyncfunc() {
   
    code1;
    var a1 = await asyncfunc1(); // 这里是一个 async 函数
    code2;
    var a2 = await promise1; // 这里是一个 真正的 Promise
    code3;
    var a3 = await asyncfunc2(); // 这里是一个 async 函数
    codeR;
    return x;
}

asyncfunc();

• 可以尝试使用如下代码，单步调试来验证

async function wrapFetch(url) {
    console.log("wrapFetch code1");
    const response = await fetch(url);
    console.log("wrapFetch code2");
    return response;
}

// 异步函数示例
async function fetchAsyncData() {
    console.log("fetchAsyncData code1");
    const response = await wrapFetch('https://qqlykm.cn/api/weather/get');
    console.log("fetchAsyncData code2 ok?", response.ok);
    const data = await response.json();
    console.log(data);
}
 
// 调用异步函数
console.log("before async");
fetchAsyncData();
console.log("after async");

• 问题：能把 async 函数串行化么？答案是不能。只要使用了 promise (叶子节点是真正的 promise)，代码的执行就要遵循 promise 的执行规则，而 promise 本身就是异步的，因此无法串行化。

一点点 Promise 的思考

想要理解如何将 async 函数返回的到底是什么 promise？以及如何将 async 函数翻译成一个 promise 的形式，需要深入理解 then 函数。

Then 函数

• Then 函数返回一个 promise，称其为 p。
• Then 注册的回调函数中也会返回一个值。那么 返回 一个值 和 返回一个 promise 有什么不同？
• 如果回调函数返回了 promise，那么这个promise 和 then 返回的 promise p 是 什么关系？官方文档：链式调用。
  • 结论：他俩在行为上是 同一个 promise
  • 知道这一点，就可以轻松的把一个 async 函数改写成 promise 的形式了。

const myPromise = new Promise((resolve, reject) => {
   
    // 进行异步操作
        const randomNumber = Math.random();
        // 如果操作成功，调用resolve并传递结果
        resolve(randomNumber);
});
 
// 使用Promise对象
myPromise.then(result => {
   
        // 操作成功时的处理逻辑
        console.log("操作成功，结果为：" + result);
        **return 1; **
        **return new Promise((rs, rj) => rs(2));**
    }).then( val => {
   
        console.log(val);
    })

将 async 改写成 promise

如何改写？下面用一个示例来展示

注：这里并没有关注异常执行流，而是只关注异步执行流。异常执行流要想完全转换，需要在promise里注册错误回调，并且 async 和 promise 都要捕获异常

// async 写法

async function asyncfunc() {
   
    code1;
    var a1 = await asyncfunc1();    // 这里是一个 async 函数
    code2;
    var a2 = await promise1;     // 这里是一个 真正的 Promise
    code3;
    var a3 = await asyncfunc2();    // 这里是一个 async 函数
    codeR;
    return x;
}

asyncfunc();

// 等价的promise 写法

function func() {
   
  return new Promise((resolve, reject) =>{
   
    code1;
    func1()
      .then( (val) => resolve(val) );
  }).then((a1) => {
   
      code2;
      return promise1;
  }).then((a2)=> {
   
      code3;
      // 返回一个Promise
      return func2(); 
  }).then((a3) => {
   
      codeR;
      return x;
  });
}
func();

结论：async 语法糖有什么好处呢？

• 代码写起来更简洁、优雅，意味着 减少出错率
• 词法作用域更广。写 code2 可以用 code1 部分的变量，写 promise 的时候就没办法了。

可验证代码

异步调用一个 网络 api 接口

• async 版本

async function wrapFetch(url) {
   
    console.log("wrapFetch code1");
    const response = await fetch(url);
    console.log("wrapFetch code2");
    return response;
}

// 异步函数示例
async function fetchAsyncData() {
   
    console.log("fetchAsyncData code1");
    const response = await wrapFetch('https://qqlykm.cn/api/weather/get');
    console.log("fetchAsyncData code2 ok?", response.ok);
    const data = await response.json();
    console.log(data);
}
 
// 调用异步函数
console.log("before async");
fetchAsyncData();
console.log("after async");

• 等价 Promise 版本

function wrapFetch(url) {
   
    return new Promise( function (resolve, reject) {
   
        console.log("wrapFetch code1");
        fetch(url).then( (response) => {
   
            resolve(response);
            console.log("wrapFetch code2");
        })
    });
}


function fetchAsyncData() {
   
    return new Promise(function (resolve, reject) {
   
        console.log("fetchAsyncData code1");
        wrapFetch('https://qqlykm.cn/api/weather/get')
            .then( val => resolve(val) )
    })
    .then( (response) => {
   
        console.log("fetchAsyncData code2 ok?", response.ok);
        return response.json()
    })
    .then((data) => {
   
        console.log(data);
    });
}

// 调用异步函数
console.log("before async");
fetchAsyncData();
console.log("after async");