异步编程与Promise的关系

Promise是异步编程的解决方案之一(异步编程中数据传递或回调嵌套的问题)。

Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理和更强大。

Promise的作用与用法

1.promise作用

promise:解决异步回调的问题。

2.promise的用法

创建异步对象，当异步对象中的异步操作执行完成之后，再执行想要执行的东西。

• resolve表示将状态变成成功完成，reject表示将状态变成失败完成
• 当resolve方法执行完成之后，再执行then方法

1).Promise传参

resolve里的参数可以传给then。

2).promise错误处理

reject中存储错误的参数，可以传给then方法中的第二个参数。

3). promise对象的then方法 和catch方法

• Promise对象的then方法有两个参数，一个是成功后的参数，另一个是失败的参数方法

• new Promise().catch()->错误捕获

4).promise的方法

• promise.resolve(“成功”),将现有的东西，转成一个Promise对象，且是resolve成功状态。
• promise.reject(‘失败’)，将现有的东西，转成一个promise对象，且是reject失败状态。
• Promise.race():与Promise.all() 的不同之处在于,它将与第一个传递的promise相同的完成方式被完成。他可以是resolves，也可以使rejects，这要取决于第一个完成的方式是两个中的哪个。
• Promise.all() ————> 一个脚本中有多个promise时，监控多个Promise对象。

Promise在实际环境下的应用

1.Promise.race():

常用于按需取消Promise的场景，搭配一个定时器传入Promise.race()方法，做到超时打断/重试的效果

用于批处理操作，需要维护一个promises数组，用race()方法及时处理最快掉resolved的Promise。为后续等待队列中的任务腾出位置

2. Promise.all()

基本用于渲染时同时需要多个接口数据/前端聚合数据的场景，按需地给传入的Promise参数定义catch函数，能够方便我们在同一个地方处理数据渲染/接口错误逻辑，避免因为一个小接口导致整个页面都无法渲染出来的情况。

3. Promise.prototype.then()

灵活使用then()作为中间件，用于分割不同的代码逻辑。能改避免在回调函数中，业务逻辑过于臃肿导致难以维护的情况。

then()的链式调用同时适用于简化接口之间相互依赖的情况，但async/await无疑在大部分情况下更胜一筹。

4. Promise.any()

仍未被完全支持，兼容性较低，暂时只能用于“从最快的服务器检索资源”等小众场景，慎用，先了解即可。

async/await的作用与用法

async 表示函数里有异步操作，

await 表示紧跟在后面的表达式需要等待结果。

1.async关键字

1）表明程序里面可能有异步过程：

async关键字表明程序里面可能有异步过程，里面可以有await关键字；当然全部是同步代码也没关系，但是这样async关键字就显得多余了；

2）非阻塞：

async函数里面如果有异步过程会等待，但是async函数本身会马上返回，不会阻塞当前线程，可以简单认为，async函数工作在主线程，同步执行，不会阻塞界面渲染，async函数内部由await关键字修饰的异步过程，工作在相应的协程上，会阻塞等待异步任务的完成再返回；

3）async函数返回类型为Promise对象：

这是和普通函数本质上不同的地方，也是使用时重点注意的地方；

（1）return newPromise();这个符合async函数本意；

（2）return data;这个是同步函数的写法，这里是要特别注意的，这个时候，其实就相当于Promise.resolve(data);还是一个Promise对象，但是在调用async函数的地方通过简单的=是拿不到这个data的，因为返回值是一个Promise对象，所以需要用.then(data => { })函数才可以拿到这个data；

（3）如果没有返回值，相当于返回了Promise.resolve(undefined);

4）无等待

联想到Promise的特点，在没有await的情况下执行async函数，它会立即执行，返回一个Promise对象，并且绝对不会阻塞后面的语句，这和普通返回Promise对象的函数并无二致；

5）await不处理异步error：

await是不管异步过程的reject(error)消息的，async函数返回的这个Promise对象的catch函数负责统一抓取内部所有异步过程的错误；async函数内部只要有一个异步过程发生错误，整个执行过程就中断，这个返回的Promise对象的catch就能抓取到这个错误；

5）async函数的执行：

async函数执行和普通函数一样，函数名带个()就可以了，参数个数随意，没有限制，也需要有async关键字；只是返回值是一个Promise对象，可以用then函数得到返回值，用catch抓整个流程中发生的错误；

2.await关键字

1）await只能在async函数内部使用：

不能放在普通函数里面，否则会报错；

2）await关键字后面跟Promise对象：

在Pending状态时，相应的协程会交出控制权，进入等待状态，这是协程的本质；

3）await是async wait的意思：

wait的是resolve(data)的消息，并把数据data返回，比如下面代码中，当Promise对象由Pending变为Resolved的时候，变量a就等于data，然后再顺序执行下面的语句console.log(a)，这真的是等待，真的是顺序执行，表现和同步代码几乎一模一样；

4）await后面也可以跟同步代码：

不过系统会自动将其转化成一个Promsie对象。

5）await对于失败消息的处理：

await只关心异步过程成功的消息resolve(data)，拿到相应的数据data，至于失败消息reject(error)，不关心不处理；对于错误的处理有以下几种方法供选择：

（1）让await后面的Promise对象自己catch；

（2）也可以让外面的async函数返回的Promise对象统一catch；

（3）像同步代码一样，放在一个try…catch结构中；

6）await对于结果的处理：

await是个运算符，用于组成表达式，await表达式的运算结果取决于它等的东西，如果它等到的不是一个Promise对象，那么await表达式的运算结果就是它等到的东西；如果它等到的是一个Promise对象，await就忙起来了，它会阻塞其后面的代码，等着Promise对象resolve，然后得到resolve的值，作为await表达式的运算结果；虽然是阻塞，但async函数调用并不会造成阻塞，它内部所有的阻塞都被封装在一个Promise对象中异步执行，这也正是await必须用在async函数中的原因；

转载自：

https://blog.csdn.net/qq_44947550/article/details/118993826

https://blog.csdn.net/yupyuping/article/details/115863636

https://blog.csdn.net/web2022050901/article/details/125182909

https://blog.csdn.net/An_Cool_bree/article/details/117133803