【春节日更】总结 promise , generator, async/await三者关系

昨天，我们详细的介绍了回调函数，promise，generrator,async/await ; 今天我们来分析下，它们之间的关系

我们的js的异步是使用回调进行实现，而它有几个缺点

从回调函数 -> promise -> promise + generrator = async/await

01

回调函数

1、 缺乏可信度

将回调函数传递给别人使用，当回调函数执行过早，过晚，多次调用等问题时，会出现bug，所以不可信任

2、 回调嵌套（回调地狱）

02

promise

后面我们使用promise来进行解决，以then操作的形式，进行链式操作，而不再是回调地狱

promise的缺点

1、 promise一旦新建就会立即执行，无法中途取消

但是我们思考到了几种方式来中断 promise 请求

1.1、 promsie.race方法

1.2、 promise中抛出异常，被catch方法捕捉

1.3、 Promises/A+标准：原Promise对象的状态将跟新对象保持一致。利用这一特性，当新对象保持“pending”状态时，原Promise链将会中止执行。

Promise.resolve().then(() => {
console.log('ok1')
return new Promise(()=>{})  // 返回“pending”状态的Promise对象
}).then(() => {
// 后续的函数不会被调用
console.log('ok2')
}).catch(err => {
console.log('err->', err)
})

2、promsie异常捕捉，只能被catch捕捉，当不写catch的时候，会被promise内部吞掉

拓展：

try…catch异常捕捉，只能捕捉同步方法，因为异步方法执行的时候，已经不再try…catch内部。已经脱离了try…catch的执行栈和上下文

3、当处于pending状态时，无法得知当前处于哪一个状态，是刚刚开始还是刚刚结束

4、 如果 Promise 连续调用，对于错误的处理是很麻烦的。你无法知道错误出在哪里。因为最后只有一个兜底的catch操作

const makeRequest = () => {
return callAPromise()
            .then(() => callAPromise())
            .then(() => callAPromise())
            .then(() => callAPromise())
            .then(() => callAPromise())
            .then(() => {
throw new Error("oops");
            })
    }

03

generator+promise = async/await

而我们的 generator（生成器）实则就是一个打断点执行的操作。通过 next , yield进行一步步的操作

后来我们发现可以把 generator 和 promise 进行结合, 实现完美的 promise 操作。后面就是有我们的 async/await 操作

优点：

1、以同步的方式进行书写，而不是 then.then.then 的回调操作，增强可读性。

2、对同步更加的友好，例如调用promise1，使用promise1返回的结果去调用promise2，然后使用两者的结果去调用 promise3。

3、对同步错误捕获更加的友好，try-catch可以捕获async/await的错误

4、解决不知道错误才哪里的问题，解决promise缺点4

5、调试更加的简单，友好

参考：

https://blog.csdn.net/weixin_42458965/article/details/111309283