Promise 用法小结

Posted 2020-12-22 zengbin13

Promise

一、解决问题

我们知道Promise是javascript中异步编程的一种解决方法。在介绍Promise前，我们思考下Promise 的诞生解决了哪些问题呢？

ES6之前，我们使用回调函数和事件处理异步操作，用来解决javaScript单线程运行时可能导致的UI渲染阻塞的问题

事件：对象的某个属性是一个函数，当发生某种行为时，运行该函数

callback回调函数：运行某个函数以实现某个功能的时候，传入一个函数作为参数，在某个特定条件下触发该函数

但是，使用回调函数也带来几个问题：

1. 回调函数放在参数的位置，嵌套回调造成回调地狱
2. 回调函数的代码和开始任务代码不在同一事件循环中，异步同步任务不能联系
3. 处理并行任务棘手，请求之间互不依赖

二、解决方案——异步模型

1. ECMA将异步操作分为三个状态：

   pedding——等待状态（未决阶段），表示事件还在进行中

   resolved——已经处理（已决阶段），表示事件产生预期的结果

   rejected——已拒绝（已决阶段），表示事件产生偏离预期的结果

   我们使用网络请求解释三种状态，请求的过程是pedding状态，请求结果状态码为200为resolved状态，请求结果状态码是500为rejected状态

2. pedding状态具有一定控制走向的能力

   resolve方法——将事件推向resolved状态，并且可以传递一些数据

   reject方法——将事件推向rejected状态，并且附带一些错误信息

   只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态

3. 一旦状态更改，不再变化。任何时候都可以获得结果

4. 事件到达已决阶段需要进行后续处理

   thenable函数——作为resolved状态的后续处理

   catchable函数——作为rejected状态的后续处理

三、基本用法

Promise是一个容器，保存着在某个未来结束的异步操作的结果

let promise = new Promise((resolve, reject) => {
	/*
	1.函数内部代码立即执行，不可取消
	2.放置ajax请求等异步操作的位置
	3.通过调用resolve函数将Promise推向已决的resolved状态
	4.通过调用rejected将Promise推向已决的rejected状态
    */
    if(/*异步操作成功*/) {
       resolve(data)
    } else {
       reject(error) 
    }  
})
promise.then((res) => {
    /*
	1.thenable函数，进入resolved状态立即执行
	2.当前为pedding状态，加入任务队列
    */
    console.log("回调成功")
}).catch((error) => {
    /*
	1.catchable函数，进入rejected状态立即执行
	2.当前为pedding状态，加入任务队列
    */
    console.log("回调失败")
})

四、Promise 链式调用

promise实例，每次then方法或者catch方法结束后都会返回一个新的Promise实例

如果前一个promise实例的状态是 resolved 并且then()的回调函数没有出错，将回调函数的返回值作为下一个then回调函数的参数

const myPromise = new Promise((resolve, reject) => {
    resolve(‘helloWorld‘);
})
myPromise.then(res => {
    console.log(res); // ‘helloWorld‘
    return 1;
}).then(res => {
    console.log(res); // 输出1
})

如果前一个promise实例的状态是 resolved 但是then()的回调函数发生错误，将抛出的错误信息作为下一个catch回调函数的参数

const myPromise = new Promise((resolve, reject) => {
    resolve(‘helloWorld‘);
})
myPromise.then(res => {
    console.log(res); // ‘helloWorld‘
    throw new Error("test")
    return 1;
}).then(res => {
    console.log("data:",res); 
}, error => {
    console.log("error:", error) //error: Error: "test"
})

如果前一个promise实例的状态是 rejected 但是then()的没有处理错误的回调函数，将抛出的错误信息作为下一个catch回调函数的参数

const myPromise = new Promise((resolve, reject) => {
    reject(‘helloWorld‘);
})

 myPromise.then(res => {
    console.log(‘helloWorld‘);
    //上方触发了reject, 没有相对应的处理catchable函数
    //错误直接抛给下一个Promise并触发下一个Promise的rejected状态
}).catch(error => {
    console.log("error:",error); //error: helloWorld
})

如果在 then 中使用return，那么 return 的值也会Promise.resove()包装

五、Promise API

(一) Promise.prototype.then()

then()方法的作用是为 Promise实例添加状态改变时的回调函数，

接收两个参数，resolved状态的回调函数和rejected状态的回调函数。第二个参数可选

then方法返回的是一个新的Promise实例，实现链式调用

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {  
  //将上一个回调函数结果作为参数传入第二个回调函数
});

(二)Promise.prototype.catch()

catch()方法用于指定发生错误时的回调函数，

异步操作抛出错误，状态变为rejected，立即调用catch()，并且可以捕获 promise实例中抛出的错误

在创建Promise实例传入的函数参数中, 如果代码报错, 则会立即触发reject方法

const promise = new Promise(function(resolve, reject) {
  throw new Error(‘test‘);
});
promise.catch(function(error) {
  console.log(error);
});
// Error test

(三) Promise.prototype.finally()

finally()方法用于指定Promise 对象都会执行的操作，不管最后状态如何

finally方法的回调函数不接受任何参数

romise
.then(result => {···})
.catch(error => {···})
.finally(() => {···})

(四) Promise.all()

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例，

const p = Promise.all([p1, p2, p3]);

p的状态由p1、p2、p3决定，分成两种情况

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数

需要同时等待多个Promise异步操作完成以后再做某件事的话可以用到Promise.all()

const getGirlResponse = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(Math.random() > 0.5 ? ‘1同意了‘ : ‘1拒绝表白‘);
    }, 1000)
})
const getSecGirlResponse = new Promise((resolve, reject) => {
   setTimeout(() => {
       if(Math.random() > 0.5) {
           resolve(Math.random() > 0.5 ? ‘2同意了‘ : ‘2拒绝表白‘);
       } else {
           reject("2打了你一巴掌")
       }
    }, 1000)
})
const getTrdGirlResponse = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(Math.random() > 0.5 ? ‘3同意了‘ : ‘3拒绝表白‘);
    }, 1000)
})
Promise.all([getGirlResponse, getSecGirlResponse, getTrdGirlResponse]).then(resp => {
    console.log(resp); 
}).catch(error => {
    console.log(error);
})

(五) Promise.race()

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例

const p = Promise.race([p1, p2, p3]);

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。率先改变的 Promise 实例的返回值，就传递给p的回调函数

let intervalTime = () => Math.random() * 2000 
const getGirlResponse = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(Math.random() > 0.5 ? ‘1同意了‘ : ‘1拒绝表白‘);
    }, intervalTime())
})
const getSecGirlResponse = new Promise((resolve, reject) => {
   setTimeout(() => {
        resolve(Math.random() > 0.5 ? ‘2同意了‘ : ‘2拒绝表白‘);
    }, intervalTime())
})
const getTrdGirlResponse = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(Math.random() > 0.5 ? ‘3同意了‘ : ‘3拒绝表白‘);
    }, intervalTime())
})
Promise.race([getGirlResponse, getSecGirlResponse, getTrdGirlResponse]).then(resp => {
    console.log(resp); 
}).catch(error => {
    console.log(error);
})

(六)Promise.resolve()

Promise.resolve()方法将现有对象转为 Promise 对象

Promise.resolve()方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象

(七)Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected

六、常见使用

(一)嵌套任务处理

//多个异步任务之间存在依赖性的
getJson("url")
    .then(n => {getJson(n[0].url)})
    .then(m => {getJson(m[0].url)})
    .then(w => {getJson(w[0].url)})
    .catch((error => {console.log("异常错误")}))

1. then方法返回一个 promise 对象，连续调用 then 方法就能链式调用 promise
2. 多个异步任务中可能出现错误，只需要调用一个 catch 方法并向其传入错误处理的回调函数

(二)并行处理任务

 // 并行处理多个异步任务
Promise.all([getJson(url), getJson(url), getJson(url)])
  .then((resule) => {
    // 如果三个请求都响应成功
    if (result[0] == 1 && result[1] == 1 && result[2] == 1) {
      console.log("请求成功");
    }
  })
  .catch((error) => {
    console.log("异常错误");
  });

七、实现 Promise

参考文档

https://blog.csdn.net/weixin_44238796/article/details/103159716

https://juejin.im/post/5e4943d0f265da57537eaba9#heading-19

https://mp.weixin.qq.com/s/UNzYgpnKzmW6bAapYxnXRQ