Promise 和 async await | 青训营

87 阅读2分钟

记录了前期沸点打卡的Promise/async await的笔记,现在复习复习这个知识,顺便发出来凑一篇笔记,主要参考了《前端人 不了解的promise/async await》

1.实际的业务需求

在js是单线程的基础上引入异步操作需要涉及js的异步代码执行和事件循环的概念。而业务的发展要求异步的请求相对于不同的返回状态做出不同的响应。

早期的解决方案是基于函数传入的响应进行处理的,在这样的情况下开发的传参顺序要完全按照代码限制的传参顺序,若使用框架开发而传入实参顺序与形参顺序不一致会导致严重的后果.

2.Promise

Promise 对象表示异步操作最终的完成(或失败)以及其结果值。

Promise执行时分三个状态:pending(执行中)、fulfilled(成功)、rejected(失败),三个状态分别对应:

  • 待定(pending):初始状态,既没有被兑现,也没有被拒绝。
  • 已兑现(fulfilled):意味着操作成功完成。
  • 已拒绝(rejected):意味着操作失败。

在JavaScript中,我们可以使用new Promise()创建一个新的Promise对象。新建Promise对象需要传入一个形式为(resolve,reject)=>{}的函数.

其中, resolve 和 reject 是默认提供的回调函数.

实现Promise时有三个原型方法then()、catch()、finally(),通过这三个方法可以访问到Promise对象内设置的 resolve 、reject 。其中这三个原型方法分别对应不同的使用场景:

  • promise.then():代表promise被接收或拒绝继续执行的情况
  • promise.catch():代表promise被拒绝的情况
  • promise.finally():代表promise完成时的情况(无论如何都会执行的情况)

3.async/await

async/await就是可以把复杂难懂的异步代码变成类同步语法的语法糖

通过在函数前使用async关键字创建一个异步函数。在该异步函数中我们可以轻松地使用await关键字放在Promise对象前去访问Promise对象的结果值(代替Promise对象的then方法,简化了then的链式调用,让代码看起来更见简洁)。在代码中还可以通过寻常的try,catch去代替Promise、catch方法。