ES6: promise（解决异步相关的问题）

 

所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理

首先我们可以来理解一下为什么会有异步处理：

• 同步：比方说在飞机上乘务员为乘客发放午餐，乘务员会按照顺序依次向每一排乘客发放餐具，只有当给第一排乘客发放完才会轮到第二排，这种严格按照顺序的操作叫同步操作。

• 异步：异步操作则是不按顺序进行，操作是否完成不会影响到整体的进度。这样可避免页面堵塞的情况。

promise主要作用：

1. 解决回调地狱；

2. 可将异步操作队列化，按照期望的顺序执行，返回符合预期的结果；

3. 所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理

promise详解：

三个状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）

要想创建一个 promise 对象、可以使用 new 来调用 Promise 的构造器来进行实例化。

new Promise(
  function (resolve, reject) {
    // 一段耗时的异步操作
    resolve('成功') // 数据处理完成
    // reject('失败') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失败
)

• promis对象用于表示一个异步操作的最终完成或失败，及其结果值

• promise对象三个状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）

• resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

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

• resolve和reject实质均为回调函数，且只能被调用一次；

promise对象只能从 pending 变为 fulfilled，或 pending 变为 rejected，当处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。

​

---

​

状态缺点：

• 一旦创建就无法停止；

• 当promise处于pedding状态时，无法确定它是成功还是失败；

• 如果不设置回调函数，promise内部的错误不会反应到外部；

• 无法得知pending状态下的进展情况

​

---

​

.then()

1、接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败） 2、.then()返回一个新的Promise实例，所以它可以链式调用 3、当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行 4、状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null； 5、如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行 6、如果返回其他任何值，则会立即执行下一级.then()

接下来看一段代码深刻理解其中的执行顺序：

.then 里的回调函数通过状态来执行相应的操作

const first = () =>
        new Promise((resolve, reject) => {
            console.log(3);
            let p = new Promise((resolve, reject) =>{
                console.log(7);
                setTimeout(() => {
                    console.log(5);
                    resolve(6);
                }, 0);
                resolve(1);
            });
            resolve(2);
            p.then(value => {
                console.log(value);
            });
            
        })
        first().then(arg => {
            console.log(arg);
        });
        console.log(4);

执行结果：

3 7 4 1 2 5
​
同步代码（最高）3 7 4
​
微任务异步代码（次高，then）1 2
​
宏任务异步代码（最低，setTimeout）5

​

---

​

.then多次调用的情况：

const p = new Promise(function(resolve,reject){
          resolve(1);
        }).then(function(value){ // 第一个then // 1
          console.log(value);
          return value * 2;
        }).then(function(value){ // 第二个then // 2
          console.log(value);
        }).then(function(value){ // 第三个then // undefined
          console.log(value);
          return Promise.resolve('resolve'); 
        }).then(function(value){ // 第四个then // resolve
          console.log(value);
          return Promise.reject('reject'); 
        }).then(function(value){ // 第五个then //reject:reject
          console.log('resolve:' + value);
        }, function(err) {
          console.log('reject:' + err);
        });