一、Promise 规范

Promise是一套专门处理异步场景的规范，它能有效的避免回调地狱的产生，使异步代码更加清晰、简洁、统一

这套规范最早诞生于前端社区，规范名称为Promise A+

该规范出现后，立即得到了很多开发者的响应

Promise A+ 规定：

所有的异步场景，都可以看作是一个异步任务，每个异步任务，在JS中应该表现为一个对象，该对象称之为Promise对象，也叫做任务对象

每个任务对象，都应该有两个阶段、三个状态

根据常理，它们之间存在以下逻辑：

任务总是从未决阶段变到已决阶段，无法逆行
任务总是从挂起状态变到完成或失败状态，无法逆行
时间不能倒流，历史不可改写，任务一旦完成或失败，状态就固定下来，永远无法改变

挂起->完成，称之为resolve；挂起->失败称之为reject。任务完成时，可能有一个相关数据；任务失败时，可能有一个失败原因。

可以针对任务进行后续处理，针对完成状态的后续处理称之为onFulfilled，针对失败的后续处理称之为onRejected

Promise API

ES6提供了一套API，实现了Promise A+规范

基本使用如下：

js 复制代码

// 创建一个任务对象，该任务立即进入 pending 状态
const pro = new Promise((resolve, reject) => {
  // 任务的具体执行流程，该函数会立即被执行
  // 调用 resolve(data)，可将任务变为 fulfilled 状态， data 为需要传递的相关数据
  // 调用 reject(reason)，可将任务变为 rejected 状态，reason 为需要传递的失败原因
});

pro.then(
  (data) => {
    // onFulfilled 函数，当任务完成后，会自动运行该函数，data为任务完成的相关数据
  },
  (reason) => {
    // onRejected 函数，当任务失败后，会自动运行该函数，reason为任务失败的相关原因
  }
);

// 或者使用then\catch
pro.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

二、Promise 的链式调用

then方法必定会返回一个新的Promise,可理解为后续处理也是一个任务
新任务的状态取决于后续处理：

若没有相关的后续处理，新任务的状态和前任务一致，数据为前任务的数据
若有后续处理但还未执行，新任务挂起
若后续处理执行了，则根据后续处理的情况确定新任务的状态
- a) 后续处理执行无错，新任务的状态为完成，数据为后续处理的返回值
- b) 后续处理执行有错，新任务的状态为失败，数据为异常数据
- c) 后续执行后返回的是一个任务对象，新任务的状态和数据与该任务对象一致

js 复制代码

const pro1 = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve(1)
  },1000)
})

const pro2 = pro1.then(data=>{
  console.log(data);
  return data + 1
})

const pro3 = pro2.then(data=>{
  console.log(data);
})

// ①
console.log(pro1, pro2, pro3)

// ②
setTimeout(()=>{
  console.log(pro1,pro2,pro3)
},2000)

分析： 在第①步打印的时候

pro1后续有处理但是有个定时任务还未执行，此时pro1的状态pending挂起
pro2针对pro1的后续处理，毫无疑问pro2也只能挂起
pro3针对pro2的后续处理，毫无疑问pro3也只能挂起

promise	状态	返回值
pro1	pending
pro2	pending
pro3	pending

1秒钟之后：

pro1的状态由pending --> fulfilled
pro2有针对pro1的完成做处理，pending --> fulfilled，输出1，后续处理没有错误，数据是他的返回值1+1=2
pro3取决于后续运行过程且没错，pending --> fulfilled，输出2

promise	状态	返回值
pro1	fulfilled	1
pro2	fulfilled	2
pro3	fulfilled	undefined

由于链式任务的存在，异步代码拥有了更强的表达力

js 复制代码

// 常见任务处理代码

/*
 * 任务成功后，执行处理1，失败则执行处理2
 */
pro.then(处理1).catch(处理2)

/*
 * 任务成功后，依次执行处理1、处理2
 */
pro.then(处理1).then(处理2)

/*
 * 任务成功后，依次执行处理1、处理2，若任务失败或前面的处理有错，执行处理3
 */
pro.then(处理1).then(处理2).catch(处理3)

Promise由浅到深宝典

一、Promise 规范

Promise A+ 规定：

Promise API

二、Promise 的链式调用