Promise深入理解

JS异步处理

众所周知，JS是一门单线程的语言，即每次只能处理一个任务。这样导致的结果就是在处理一些耗时比较长的任务时，存在等待任务执行的问题，特别是在浏览器页面的展示上，会有假死的现象发生。

为了应对这些问题，JS将任务的执行模式分为两种：同步执行（Synchronous）和异步执行（Asynchronous）。

ES6之前

在ES6之前，处理异步只能通过回调函数的方式来传达执行已经结束的标识。最常见的例子就是ajax请求。

let getData = function(callback) {
   $.ajax({
    url: '',
    data: {},
    success: function(res) {
        callback(res);
    }
  })
}

而这种回调函数使编写出来的代码不易按照逻辑条理来阅读和维护。

ES6之后

Promise的出现无疑大大解决了代码中大量的回调函数不易维护的问题。

function promiseGetData() {
  return new Promise(function (resolve) {
   $.ajax({
      url: '', 
     data: {},
    success: function (data) {
       resolve(data);
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        resolve(XMLHttpRequest);
     }
    });
  });
}
promiseGetData().then(function(data) {
   console.log(data);
})

Promise对象

Promise是一个构造函数

在浏览器中打印Promise，可以看出它是一个构造函数，并带有all，race，resolve，reject等方法。同时，在原型链上带有catch，then等方法。

1539512140981.jpg

Promise的状态

Promise提供了三种状态：pending、fulfilled、rejected。除了pending之外，其他状态都不可逆并且不可更改。
Promise构造函数有两个参数，分别是resolve函数和reject函数。当状态更改为fulfilled时，会将返回的数据传到resolve函数中执行；当状态更改为rejected时，会将返回的错误信息传到reject函数中执行。当状态改变后，会执行then方法，返回成功或失败的状态。

new Promise(function(data) {
  console.log("success");
}, function(err) {
  console.log("error");
}).then(function(res) {
  console.log("状态改变之后执行");
})

then--链式操作的方法

then是Promise中的精髓方法。它返回的是一个Promise对象，作用是为Promise实例添加状态改变时的回调函数。而它返回的Promise对象，并不是先前的那个对象，而是全新的一个Promise。

let promises = new Promise(function(data) {
  console.log("success");
}, function(err) {
  console.log("error");
}).then(function(res) {
  console.log("状态改变为fulfilled时执行");
}).catch(function(error) {
  console.log("状态改变为rejected时执行");
})

Promise.all([p1, p2, p3])

这是Promise提供的功能方法，在所有Promise都更改状态之后才会执行并以数组的形式返回所有Promise的结果。

Promise.all = function(promises) {
  return new Promise((resolve, reject) => {
    let arr = [];
    let i = 0;
    function processData(index, data) {
        arr[index] = data;
        if (++ i == promises.length) {
            resolve(arr);
        }
    }

    for (var i = 0; i < promises.length; i++) {
        promise[i].then(data => {
            processData(i, data);
        }).catch(function(error) {
            reject(error);
        })
    }
  })
}

Promise.race([p1, p2, p3])

race方法是将多个Promise对象整合，只要其中一个Promise更改状态，就会返回该Promise返回的数据。

Promise.race = function(promises) {
  return new Promise((resolve, reject) => {
    for(let i = 0; i < promises.length; i++) {
        promise[i].then(resolve, reject);
    }
  })
}