Promise 简单理解与使用

一、概念

• Promise 是异步编程的一种解决方案，其实是一个构造函数，自身上有 all、resolve、reject 这几个方法，实例对象上有 then、catch 等方法。
• 简单理解，Promise 是一个容器，里面保存着某个未来才会结束的事件（通常是异步操作，如ajax请求）的结果。

二、特点

1. 对象的状态不受外界影响

有三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果，可以决定当前是哪种状态，任何其他操作都无法改变这个状态。

2. 一旦状态改变，就不会再变

Promise 对象的状态改变，只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected。只要这两种情况发生其中的一种，状态就凝固了，不会再变了，会一直保持这个结果。（初始化一个新的promise对象，这时的状态为pending）。

三、执行顺序

Promise 新建后会立即执行，不过 then 方法是回调函数，将在当前脚本所有同步任务执行完才会执行：

let p = new Promise((resolve, reject) => {
  console.log(promise)
  resolve()
})
p.then(() => {
  console.log('resolved')
})
console.log('---end---')

// 执行顺序
// promise
// ---end---
// resolved

四、用法

1. 基本用法

let flag = false
// resolve和reject这两个函数由js引擎提供，不用自己部署(Promise构造函数接收函数作为参数)
let p = new Promise((resolve, reject) => {
  if(flag) {
    resolve()
  } else {
    reject()
  }
})
p.then(() => {
  console.log("成功")  // 成功回调
})
p.catch(() => {
  console.log("失败")  // 失败回调
})

2. resolve 函数的作用

将 Promise 对象的状态从“未完成”变为“成功”，在异步操作成功时调用，并将异步操作的结果作为参数传递出去。

3. reject 函数的作用

将 Promise 对象的状态从“未完成”变为“失败”，在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。

4. then 方法的作用

可以接受两个回调函数作为参数。第一个回调函数是 Promise 对象的状态变为 resolved 时调用，第二个回调函数是 Promise 对象的状态变为 rejected 时调用。

// 上面的then()代码块可以改为：
p.then(() => {
  console.log("成功")
}, () => {
  console.log("失败")
})

5. catch 方法的作用

和 then 方法的第二个参数一样，用来指定 reject 的回调。

五、all()

Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调：

let flag = false
function fn1() {
  flag = true
  let p = new Promise((resolve, reject) => {
    if(flag) {
      resolve(flag)
    }
  })
  return p
}
function fn2() {
  flag = false
  let p = new Promise((resolve, reject) => {
    if(!flag) {
      resolve(flag)
    }
  })
  return p
}

// all方法中的参数以数组形式进行传入，如果数组中有一个异步操作未完成，那么then()不会执行
Promise.all([fn1, fn2]).then((res) => {
  console.log(res)  // [true, false]
})

六、race()

race 方法的用法与 all 方法一样，只不过 race 方法只要有一个异步操作执行完毕后，就可以执行then回调：

// 将以上代码修改一下
let flag = false
function fn1() {
  flag = true
  let p = new Promise((resolve, reject) => {
    if(flag) {
      resolve(flag)
    }
  })
  return p
}
function fn2() {  
  let p = new Promise((resolve, reject) => { // 此异步函数不会执行
    if(!flag) {
      resolve(flag)
    }
  })
  return p
}

// race方法中只要有一个异步操作执行，就可以调用then()
Promise.race([fn1, fn2]).then((res) => {
  console.log(res)  // true
})