【异步编程】Promise

分手后的思念是犯贱 2023-10-13 17:23 53阅读 0赞

### Promise的基本用法 ###

#### 创建promise对象 ####

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。

#### promise有哪些方法 ####

Promise有五个常用的方法：then()、catch()、all()、race()、finally。

**1.then方法**

当Promise执行的内容符合成功条件时，调用 `resolve` 函数，失败就调用reject 函数。那么这里的 `resolve` 函数在哪定义的呢？其实你传给 `then` 的函数就是 `resolve` 函数。

**2.catch方法**

`Promise` 对象除了有 `then` 方法，还有一个 `catch` 方法。比如，当我们在 Promise 里面抛出异常，调用了 reject 方法，这个 reject 方法是在哪定义的呢？其实你传给 `catch` 的函数就是这个 `reject` 方法。

**3.all方法**

假设我们需要有 3 个异步任务（比如3个异步请求），我们希望在 3 个异步任务全部执行完毕之后，一起把请求结果打印出来，应该如何实现呢？答案是使用 all 方法。

all方法可以完成并行任务， 它接收一个数组，数组的每一项都是一个promise对象。当数组中所有的promise的状态都达到resolved的时候，all方法的状态就会变成resolved，如果有一个状态变成了rejected，那么all方法的状态就会变成rejected。

**4.race方法**

假设有这么一个场景，我们发送了 3 个请求，我们只需要返回速度最快的请求。比如 2 号请求最先返回，那么我们直接打印 2 号的返回结果，不管 1号和 3号了，那么这种情况下就需要使用 race。

race方法和all一样，接受的参数是一个每项都是 promise 的数组，但是与all不同的是，当最先执行完的事件执行完之后，就直接返回该promise对象的值。如果第一个promise对象状态变成resolved，那自身的状态变成了resolved；反之第一个promise变成rejected，那自身状态就会变成rejected。

**race和all的区别是什么**  
（1）Promise.all  
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。  
Promise.all中传入的是数组，返回的也是是数组，并且会将进行映射，传入的promise对象返回的值是按照顺序在数组中排列的，但是注意的是他们执行的顺序并不是按照顺序的，除非可迭代对象为空。  
需要注意，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，这样当遇到发送多个请求并根据请求顺序获取和使用数据的场景，就可以使用Promise.all来解决。  
（2）Promise.race  
顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race(\[p1, p2, p3\])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。当要做一件事，超过多长时间就不做了，可以用这个方法来解决：

Promise.race([promise1,timeOutPromise(5000)]).then(res=>{
        })

**5.finally方法**

通过之前的例子，我们知道了，当在 Promise 内部调用 resolve 的时候，会执行 then 里面的回调函数，当在 Promise 内部执行 reject 的时候，会执行 catch 里面的回调函数。假设我们有一个函数，不管是 promise 内部调用了 reject 还是 resolve，都希望它能执行，那么就需要使用到 finally 方法。

finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

### Promise解决了什么样的问题 ###

在promise出现之前，如果需要进行异步操作，一般都使用回调函数。但是如果回调函数嵌套层数过多，就会造成回调地狱：

在工作中经常会碰到这样一个需求，比如我使用ajax发一个A请求后，成功后拿到数据，需要把数据传给B请求；那么需要如下编写代码：

let fs = require('fs')
    fs.readFile('./a.txt','utf8',function(err,data){
        
      fs.readFile(data,'utf8',function(err,data){
        
        fs.readFile(data,'utf8',function(err,data){
        
          console.log(data)
        })
      })
    })

上面的代码有如下缺点：

后一个请求需要依赖于前一个请求成功后，将数据往下传递，会导致多个ajax请求嵌套的情况，代码不够直观。  
如果前后两个请求不需要传递参数的情况下，那么后一个请求也需要前一个请求成功后再执行下一步操作，这种情况下，那么也需要如上编写代码，导致代码不够直观。

Promise出现之后，代码变成这样：

let fs = require('fs')
    function read(url){
        
      return new Promise((resolve,reject)=>{
        
        fs.readFile(url,'utf8',function(error,data){
        
          error && reject(error)
          resolve(data)
        })
      })
    }
    read('./a.txt').then(data=>{
        
      return read(data) 
    }).then(data=>{
        
      return read(data)  
    }).then(data=>{
        
      console.log(data)
    })