Promise快速上手

概述

回调函数JavaScript异步编程的根基,但如果我们直接使用传统回调方式去完成复杂的异步流程,就无法避免回调函数嵌套的问题,即常说的“回调地狱”。

为了解决这个问题,CommonJS社区提出了Promise规范,在ES2015中被标准化,成为语言规范。

Promise就是一个对象,用来表示一个异步任务在最终结束后,是成功还是失败。类似于内部对外界做出了一个“承诺”,一开始,处于待定状态(Pending,最终有可能是成功(Fulfilled状态,也有可能是失败(Rejected状态,最终的结果状态明确后,都会有相应的任务被执行,一但结果明确,就不可能再发生改变

快速上手

const promise = new Promise(function (resolve, reject) {
  // 这里用于兑现承诺
  // 这里的代码会被同步执行,属于同步任务
  console.log(1)
  resolve(100) // 承诺达成
  //reject(new Error('promise rejected')) // 承诺失败
})
// then 方法接收两个参数,第一个是成功回调,第二个是失败回调
promise.then(function(value) {
  // promise的回调属于微任务
  console.log('resolved', value)
}, function (error) {
  console.log('rejected', error)
})

如果在回调函数中又需要发起一次异步任务,循环往复,依然会出现“回调地狱”,这是使用Promise的一个常见误区,对于这种情况,我们应该借助于Promise then方法链式调用的特点,保证异步任务的扁平化。

链式调用

  • then方法内部会返回一个全新的Promise对象
  • 后面的then方法就是在为上一个then返回的Promise注册回调
  • 前面then方法中回调函数的返回值会作为后面then方法回调的参数
  • 如果回调中返回的是Promise,那后面then方法的回调会等待它的结束
  • 使用catch捕获异常可以捕获到Promise链条上的异常,但上一个示例中的第二个参数捕获异常函数只是给第一个Promise注册了失败回调
const promise = new Promise(function (resolve, reject) {
  resolve(100)
})
promise.then(function(value) {
  console.log('resolved', value) 
}).then(function (value){
  console.log(value) // undefined
  throw new Error()
}).catch(function (error) {
  // catch 方法捕获异常
  console.log('error') // 'error'
})

静态方法

resolve
  • 该方法的作用是,快速的把一个值转换成一个Promise对象,例如Promise.resolve('foo')
      Promise.resolve('foo').then(value => {
        console.log(value) // 'foo'
      })
    
  • 如果resolve的参数是一个promise,则会原样返回这个promise
      let promise = new Promise((resolve, reject) => {})
      let promise2 = Promise.resolve(promise)
      console.log(promise === promise2) // true
    
reject
  • resolve类似,会快速创建一个状态为失败的Promise对象
all
  • 参数为一个数组,当内部所有Promise都执行完毕后,返回的Promise状态才会改变,若有一个Promise状态为失败,则返回的Promise对象状态也会变成失败,不再等待其它的Promise
let p1 = new Promise((resolve, reject) => {
  resolve('p1')
})
let p2 = new Promise((resolve, reject) => {
setTimeout(function () {
    resolve('p2')
}, 1000)
  
})
let p3 = new Promise((resolve, reject) => {
  resolve('p3')
})
Promise.all([p1, p2, p3]).then(res => {
  // 返回的结果与参数Promise对应
  console.log(res) // ["p1", "p2", "p3"]
}).catch(error => {
  console.log(error)
})

race

all方法是等待所有任务结束,而race只会等待第一个结束的任务

你可能感兴趣的:(Promise快速上手)