Javascript — Promise

场景

异步请求1里面（比如ajax）

// ajax原生请求1
var url = 'url1';
var request;
var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();
XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
        request = XHR.response;
        console.log(request);
      //请求2
      {
        //请求3
        {
            //请求4
          {
          //...
          }
        }
      }
    }
}

还需要发起一个请求2

而这个请求的参数需要是第一个请求的结果。这个时候我们就必须等上一个请求完成之后，再发起第二个请求。

当出行第3个请求，4个，5个。。。仍然要依赖上一个请求的时候，代码出现了回调地狱

Promise

es6的一个构造函数，看看其结构。

image.png

解决回调地狱之外，还有一个非常重要的需求：为了代码更加具有可读性和可维护性，我们需要将数据请求与数据处理明确的区分开来

Promise对象有三种状态

• pending
• resolved(fulfilled)
• rejected

这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆

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

在Promise对象的构造函数中，将一个函数作为第一个参数

实际例子

参考阅读

彻底掌握Promise