轻松掌握Promise-猿码集

1. Promise的概念

Promise是ES6新增的一个异步编程解决方案，可以更加优雅地处理异步操作，避免回调地狱。Promise对象代表一个异步操作的最终完成或失败，并返回一个结果，拥有pending（进行中）、fulfilled（已成功）和rejected（已失败）三种状态。当Promise处于pending状态时，可以转化为fulfilled或rejected状态，状态转化后不可更改。

可以使用Promise代替回调函数，避免回调地狱，提高代码可读性和可维护性。

Promise的基本语法如下：


const promise = new Promise((resolve, reject) => {
  //异步操作
  //若成功，则调用resolve，并传入结果数据，否则调用reject
})
//then()方法可以处理Promise对象的成功状态，catch()方法可以处理Promise对象的失败状态
promise.then(result => {
  //处理成功状态
}).catch(error => {
  //处理失败状态
})

2. Promise的基本用法

2.1 Promise的三种状态

Promise有三种状态，分别为pending（进行中）、fulfilled（已成功）和rejected（已失败），状态转化后不可更改。

Promise的状态转化示意图如下:

Promise的基本使用示例:


const temperature = 0.6 //模拟温度
const promise = new Promise((resolve, reject) => {
  if (temperature > 0.5) {
    resolve('温度正常')
  } else {
    reject('温度过低')
  }
})
promise.then(result => {
  console.log(result) //输出温度正常
}).catch(error => {
  console.log(error) //输出温度过低
})

2.2 Promise.all()

Promise.all()方法可以让多个Promise对象在同时执行后返回一个集合中的全部结果。只有在多个Promise对象都成功的情况下才能返回一个成功结果，如果其中一个Promise对象失败，则返回一个失败结果。

Promise.all()的使用示例:


const p1 = Promise.resolve(1)
const p2 = Promise.resolve(2)
const p3 = Promise.resolve(3)
Promise.all([p1, p2, p3]).then(results => {
  console.log(results) //输出[1, 2, 3]
}).catch(error => {
  console.log(error)
})

2.3 Promise.race()

Promise.race()方法可以让多个Promise对象在同时执行后返回集合中最先有结果的那个Promise对象的结果。

Promise.race()的使用示例:


const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('a')
  }, 1000)
})
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('b')
  }, 500)
})
Promise.race([p1, p2]).then(result => {
  console.log(result) //输出b
}).catch(error => {
  console.log(error)
})

3. Promise进阶用法

3.1 Promise.resolve()

Promise.resolve()方法是创建一个Promise实例的简写方法，可以将一个非Promise的对象或值转化为Promise对象。

Promise.resolve()的使用示例:


Promise.resolve('success').then(result => {
  console.log(result) //输出success
})
Promise.resolve(new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('内部 Promise 成功')
  }, 1000)
})).then(result => {
  console.log(result) //输出内部 Promise 成功
})

3.2 Promise.reject()

Promise.reject()方法是创建一个失败状态的Promise对象，可直接返回错误信息。

Promise.reject()的使用示例:


Promise.reject('fail').catch(error => {
  console.log(error) //输出fail
})

3.3 Promise.prototype.finally()

Promise.prototype.finally()方法用于指定一个无论Promise对象最后状态如何都会执行的操作，该方法是ES2018标准的一部分。finally()方法返回一个Promise对象，因此可以链式调用。

Promise.prototype.finally()的使用示例:


Promise.resolve('success').then(result => {
  console.log(result) //输出success
}).finally(() => {
  console.log('无论成功失败都会执行') //输出无论成功失败都会执行
})

3.4 Promise.catch()

Promise.catch()方法用于处理Promise对象的失败状态，相当于.then(null, rejection)

Promise.catch()的使用示例:


const temperature = 0.3 //模拟温度
const promise = new Promise((resolve, reject) => {
  if (temperature > 0.5) {
    resolve('温度正常')
  } else {
    reject('温度过低')
  }
})
promise.then(result => {
  console.log(result) 
}).catch(error => {
  console.log(error) //输出温度过低
})

3.5 Promise.allSettled()

Promise.allSettled()方法可以让多个Promise对象在同时执行后返回一个集合中的全部结果。与Promise.all()不同的是，Promise.allSettled()无论各个Promise对象的状态如何，都会返回一个集合对象的状态。

Promise.allSettled()的使用示例:


const ps = [Promise.resolve(1), Promise.reject('失败'), Promise.resolve(3)]
Promise.allSettled(ps).then(results => {
  console.log(results) //输出 [{status: "fulfilled", value: 1}, {status: "rejected", reason: "失败"}, {status: "fulfilled", value: 3}]
})

3.6 Promise.any()

Promise.any()方法可以让多个Promise对象在同时执行后返回集合中第一个成功的那个Promise对象的结果。如果所有Promise对象都失败，则返回一个失败对象。

Promise.any()的使用示例:


const p1 = Promise.reject('失败')
const p2 = Promise.resolve('第二个成功')
const p3 = Promise.resolve('第三个成功')
Promise.any([p1, p2, p3]).then(result => {
  console.log(result) //输出第二个成功
}).catch(errors => {
  console.log(errors) 
})

4. 总结

Promise是一个解决回调地狱的，用于更加优雅地处理异步操作的方案。通过Promise对象可以更加便捷地处理异步操作，避免状态混乱以及处理代码整洁。提升开发效率、代码可维护性、代码可读性以及代码的可重用性也是Promise最大的优点。

轻松掌握Promise