Promise从入门到放弃

  • A+
所属分类:Web前端
摘要

抽象的表达就是:Promise 是异步编程的一种解决方案。而具体点的表达就是:


Promise的理解与使用

Promise的理解

Promise是什么

抽象的表达就是:Promise 是异步编程的一种解决方案。

而具体点的表达就是:

  1. 在语法上:Promise 是一个构造函数;
  2. 在功能上:Promise 对象是用来封装一个异步操作并可以从中获取结果;

Promise的状态

Promise 只有三种状态,分别为初始状态(pending)、成功状态(fulfilled / resolved)、失败状态(rejected)。

  1. pending(初始状态): 初始状态,既不是成功,也不是失败状态;
  2. fulfilled / resolved(已成功): 意味着操作成功完成;
  3. rejected(已失败): 意味着操作失败;

而在这三种状态之间,Promise 对象的状态改变只有两种情况,分别是:

  1. 从初始状态(pending)变为成功状态(fulfilled / resolved);
  2. 从初始状态(pending)变为失败状态(rejected);

只要上面这两种情况发生了,状态就凝固了,不会再变了,会一直保持这个结果。

一个 Promise 对象只能改变一次状态,无论最后是变成成功还是失败,都会有一个数据结果。

为什么要用Promise

使用 Promise 的原因有如下两点:

  1. 指定回调函数的方式更加灵活
  2. 支持链式调用,可以解决回调地狱的问题

那么回调地狱又是什么呢?

回调地狱即回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调的执行条件。

而回调地狱十分不便于开发者阅读,也不利于进行异常处理。因此,使用 Promise 的链式调用可以解决此类问题。

Promise的基本使用

Promise 的基本书写语法大致如下:

function fn() {   return new Promise((resolve, reject) => {     成功时调用 resolve(value)     失败时调用 reject(error)   }) } fn().then(成功函数1, 失败函数1).then(成功函数2, 失败函数2) 

let p = new Promise((resolve, reject) => {   setTimeout(() => {     let time = Date.now()     console.log(time)     if (time % 2 === 1) {       resolve(time)     } else {       reject(time)     }   }, 1000) }) p.then((value) => {   console.log('成功的回调' + value) }, (error) => {   console.log('失败的回调' + error) }) 

Promise的API

Promise.prototype.then

Promise 实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的。该方法返回一个新的 promise 对象。

它的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。

let p1 = new Promise((resolve, reject) => {   ... }) p1.then(value => {...}, error => {...}) 

Promise.prototype.catch

Promise.prototype.catch() 方法是 .then(null, rejected) 或 .then(undefined, rejected) 的别名,用于指定发生错误时的回调函数。

let p1 = new Promise((resolve, reject) => {   reject('error') }) p1.then(value => {   console.log(value) }).catch(error => {   console.log(error) }) 

Promise.resolve

Promise.resolve() 返回一个成功 Promise 对象。

// value: 成功的数据或 Promise 对象 Promise.resolve(value) 
let p1 = Promise.resolve('p1') // 等价于 let p1 = new Promise(resolve => {   resolve('p1') }) 

Promise.reject

Promise.reject() 返回一个失败的 Promise 对象。

// error: 失败的原因 Promise.reject(error) 
let p2 = Promise.reject('error') // 等价于 let p2 = new Promise((resolve, reject) => {   reject('error') }) 

Promise.all

Promise.all() 方法用于将多个 Promise 实例包装成一个新的 Promise 实例。传入的参数为数组形式。

该 Promise 对象在数组参数对象里所有的 Promise 对象都成功的时候才会触发成功,一旦有任何一个数组参数对象里面的 Promise 对象失败则立即触发该 Promise 对象的失败。

// promise1 、promise2 、 promise3 都成功才会调用成功函数,否则调用失败函数 Promise.all([promise1, promise2, promise3, ...]).then(成功函数, 失败函数) 

let p1 = new Promise((resolve, reject) => {   resolve('p1') }) let p2 = new Promise((resolve, reject) => {   resolve('p2') }) let p3 = new Promise((resolve, reject) => {   reject('p3') })  let pAll1 = Promise.all([p1, p2, p3]).then(value => {   console.log(value) }, error => {   console.log(error)    // p3 })  let pAll2 = Promise.all([p1, p2]).then(value => {   console.log(value)    // (2) ["p1", "p2"] }, error => {   console.log(error) }) 

Promise.all() 返回一个新的 Promise, 只有所有的 Promise 都成功才成功, 只要有一个失败了就直接失败。

Promise.race

Promise.race() 方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。传入的参数为数组形式。

race 翻译过来大致就是“比赛”的意思。因此,第一个完成的 Promise 的结果状态就是最终的结果状态。

// 如果 promise1 为成功状态并先完成,那么最终将执行成功函数;如果 promise1 为失败状态并先完成,那么最终将执行失败函数。 Promise.race([promise1, promise2, promise3, ...]).then(成功函数, 失败函数) 

let p1 = new Promise((resolve, reject) => {   setTimeout(() => {     resolve('p1')   }, 1000) }) let p2 = new Promise((resolve, reject) => {   setTimeout(() => {     resolve('p2')   }, 2000) }) let p3 = new Promise((resolve, reject) => {   setTimeout(() => {     reject('p3')   }, 3000) })  Promise.race([p1, p2, p3]).then(value => {   console.log(value)    // p1 }, error => {   console.log(error) }) 

手写Promise - 待完善

相关问题与题目

如何改变Promise的状态

Promise 状态的改变除了上面所说的从 pendding 变为 resolved 和 pendding 变为 rejected 之外,还有一种可以改变状态,那就是抛出异常,会从 pendding 就会变为 rejected。

let p = new Promise((resolve, reject) => {   throw new Error('error') }) p.then(   value => {},   error => {     console.log(error)    // Error: error   } ) 

改变Promise状态和指定回调函数的谁先谁后

都有可能,一般情况下先指定回调函数然后再改变的状态,但是也可也先改变状态然后再指定回调函数

如下两种方法可以先改变状态然后再指定回调函数:

  1. 在执行器中直接调用 resolve() / reject()
  2. 添加 setTimeout 延迟更长的时间调用 .then()
// 先指定的回调函数,并保存当前指定的回调函数。然后改变的状态,再执行异步回调函数 let p1 = new Promise((resolve, reject) => {   setTimeout(() => {     resolve('p1')   }, 1000) }) p1.then(value => {   console.log(value) }, error => {   console.log(error) }) 

// 先改变的状态,然后指定回调函数,并异步执行回调函数 let p2 = new Promise((resolve, reject) => {   resolve('p2') }) p2.then(value => {   console.log(value) }, error => {   console.log(error) }) 

// 先改变的状态,然后指定回调函数,并异步执行回调函数 let p3 = new Promise((resolve, reject) => {   setTimeout(() => {     resolve('p3')   }, 1000) }) setTimeout(() => {   p3.then(value => {     console.log(value)   }, error => {     console.log(error)   }) }, 1200) 

.then()返回的新Promise的结果状态由什么决定

  1. 如果返回的是非 Promise 的任意值, 新 Promise 变为 resolved, value 为返回的值;
  2. 如果返回的是另一个新 Promise, 那么这个 Promise 的结果就会成为新 Promise 的结果 ;
  3. 如果抛出异常, 新 Promise 变为 rejected, error 为抛出的异常;
new Promise((resolve, reject) => {   resolve('hh') }).then(value => {   console.log('demo1,' + value)    // demo1,hh }, error => {   console.log('demo1,' + error) }).then(value => {   console.log('demo2,' + value)    // demo2,undefined }, error => {   console.log('demo2,' + error) }) 

new Promise((resolve, reject) => {   resolve('hh') }).then(value => {   console.log('demo1,' + value)    // demo1,hh   return 1 }, error => {   console.log('demo1,' + error) }).then(value => {   console.log('demo2,' + value)    // demo2,1 }, error => {   console.log('demo2,' + error) }) 

new Promise((resolve, reject) => {   resolve('hh') }).then(value => {   console.log('demo1,' + value)    // demo1,hh   return Promise.resolve('3') }, error => {   console.log('demo1,' + error) }).then(value => {   console.log('demo2,' + value)    // demo2,3 }, error => {   console.log('demo2,' + error) }) 

new Promise((resolve, reject) => {   resolve('hh') }).then(value => {   console.log('demo1,' + value)    // demo1,hh   return Promise.reject('4') }, error => {   console.log('demo1,' + error) }).then(value => {   console.log('demo2,' + value) }, error => {   console.log('demo2,' + error)    // demo2,4 }) 

new Promise((resolve, reject) => {   resolve('hh') }).then(value => {   console.log('demo1,' + value)    // demo1,hh   throw 5 }, error => {   console.log('demo1,' + error) }).then(value => {   console.log('demo2,' + value) }, error => {   console.log('demo2,' + error)    // demo2,5 })