深入理解promise

对于现在的前端同学来说你不同PRomise你都不好意思出门了。对于前端同学来说promise已经成为了我们的必备技能。

那么，下面我们就来说一说promise是什么，它能帮助我们解决什么问题，我们应该如何使用它？

这是我个人对promise的理解。欢迎吐槽 ：)

Promise是什么

promise的意思是承诺，有的人翻译为许愿，但它们代表的都是未实现的东西，等待我们接下来去实现。

Promise最早出现在commnjs，随后形成了Promise/A规范。在Promise这个技术中它本身代表以目前还不能使用的对象，但可以在将来的某个时间点被调用。使用Promise我们可以用同步的方式写异步代码。其实Promise在实际的应用中往往起到代理的作用。例如，我们像我们发出请求调用服务器数据，由于网络延时原因，我们此时无法调用到数据，我们可以接着执行其它任务，等到将来某个时间节点服务器响应数据到达客户端，我们即可使用promise自带的一个回调函数来处理数据。

Promise能帮我们解决什么痛点

JavaScript实现异步执行，在Promise未出现前，我们通常是使用嵌套的回调函数来解决的。但是使用回调函数来解决异步问题，简单还好说，但是如果问题比较复杂，我们将会面临回调金字塔的问题（pyramid of Doom）。

var a = function() {
    console.log('a');
};

var b = function() {
    console.log('b');
};

var c = function() {
    for(var i=0;i<100;i++){
        console.log('c')
    }  
};

a(b(c)); // 100个c -> b -> a

我们要桉顺序的执行a，b，c三个函数，我们发现嵌套回调函数确实可以实现异步操作（在c函数中循环100次，发现确实是先输出100个c，然后在输出b，最后是a）。但是你发现没这种实现可读性极差，如果是几十上百且回调函数异常复杂，那么代码维护起来将更加麻烦。

那么，接下来我们看一下使用promise（promise的实例可以传入两个参数表示两个状态的回调函数，第一个是resolve，必选参数；第二个是reject，可选参数）的方便之处。

var promise = new Promise(function(resolve, reject){
    console.log('............');
    resolve(); // 这是promise的一个机制，只有promise实例的状态变为resolved，才会会触发then回调函数
});

promise.then(function(){
    for(var i=0;i<100;i++) {
        console.log('c')
    }    
})
.then(function(){
    console.log('b')
})
.then(function(){
    console.log('a')
})

那么，为什么嵌套的回调函数这种JavaScript自带实现异步机制不招人喜欢呢，因为它的可读性差，可维护性差；另一方面就是我们熟悉了jQuery的链式调用。所以，相比起来我们会更喜欢Promise的风格。

promise的3种状态

上面提到了promise的 resolved 状态，那么，我们就来说一下promise的3种状态，未完成（unfulfilled）、完成（fulfilled）、失败（failed）。

在promise中我们使用resolved代表fulfilled，使用rejected表示fail。

ES6的Promise有哪些特性

1. promise的状态只能从 未完成->完成, 未完成->失败 且状态不可逆转。
2. promise的异步结果，只能在完成状态时才能返回，而且我们在开发中是根据结果来选择来选择状态的，然后根据状态来选择是否执行then()。
3. 实例化的Promise内部会立即执行，then方法中的异步回调函数会在脚本中所有同步任务完成时才会执行。因此，promise的异步回调结果最后输出。示例代码如下：

var promise = new Promise(function(resolve, reject) {
  console.log('Promise instance');
  resolve();
});

promise.then(function() {
  console.log('resolved result');
});
for(var i=0;i<100;i++) {
console.log(i);
/*
Promise instance
1
2
3
...
99
100
resolved result
*/

上面的代码执行输出结果的先后顺序，曾经有人拿到这样一个面试题问过我，所以，这个问题还是要注意的。

resolve中可以接受另一个promise实例

resolve中接受另一个另一个对象的实例后，resolve本实例的返回状态将会有被传入的promise的返回状态来取代。

reject状态替换实例，代码如下：

const p1 = new Promise(function (resolve, reject) {
    cosole.log('2秒之后，调用返回p1的reject给p2');
    setTimeout(reject, 3000, new Error('fail'))
})

const p2 = new Promise(function (resolve, reject) {
    cosole.log('1秒之后，调用p1');
    setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error))

// fail

resolve状态替换实例，代码如下：

const p1 = new Promise(function (resolve, reject) {
    cosole.log('2秒之后，调用返回p1的resolve给p2');
    setTimeout(resolve, 3000, 'success')
})

const p2 = new Promise(function (resolve, reject) {
    cosole.log('1秒之后，调用p1');
    setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error))

// success

注意：promise实例内部的resolve也执行的是异步回调，所以不管resolve放的位置靠前还是靠后，都要等内部的同步函数执行完毕，才会执行resolve异步回调。

new Promise((resolve, reject) => {
    console.log(1);
    resolve(2);
    console.log(3);
}).then(result => {
    console.log(result);
});
/*
1
3
2
*/

这个问题也在面试题中出现过，所以，要牢记。

promise和ajax如何结合使用

function PromiseGet (url) {
    return new Promise( (resolve, reject) => {
        let xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.onreadystatechange = function () {
            if (this.readyState === 4) {
                if (this.status === 200) {
                    resolve(this.responseText, this)
                } else {
                    let resJson = {
                        code: this.status,
                        response: this.response
                    }
                    reject(resJson, this)
                }
            }
        }
        xhr.send()
    })
}

我们发现用promise技术结合ajax，只是在promise实例中引入ajax，在ajax请求处理的结果中使用了resolve和reject状态。

前面我们说了resolve()，返回执行then()代表完成，那么，reject()代表失败，返回执行catch()，同时运行中抛出的错误也会执行catch()

现在有一个非常好用的promise和Ajax结合的github项目Axios ，想要深入了解的同学可以研究下它的源码。

promise.all()方法可以处理一个以promise实例为元素的数组

let promise = Promise.all([p1, p2, P3])

promise 的状态由p1，p2，p3共同决定。当它们都为resolve状态时，promise状态为true，它们的返回值组成一个数组，传递给promise；它们只要有一个的状态为reject，就将该实例的返回值传递给promise

promise.race()方法也可以处理一个promise实例数组

但它和promise.all()不同，从字面意思上理解就是竞速，那么理解起来上就简单多了，也就是说在数组中的元素实例那个率先改变状态，就向下传递谁的状态和异步结果。

将一个普通对象转化为Promise对象

在开发中我们经常会遇到$.ajax()的使用且会遇到$.ajax()间的依赖使用，由于两个或多个$.ajax()间是同步的，如果我们并排着写实现不了依赖关系，所以，我们往往使用嵌套，但是对于ajax这样复杂的结构，嵌套不是个好办法，我们需要先将代码抽象提取，做一下封装，代码如下：

/*
url：地址
data：数据，在函数内部会转化成json。如果没传，表示用GET方法；如果传了，表示用POST方法
*/
function ajax(url, data, callback) {
    $.ajax({
      url: url,
      type: data == null ? 'GET' : 'POST',
      dataType: "json",
      data: data == null ? '' : JSON.stringify(data),
      async: true,
      contentType: "application/json",
      success: function (data) {
          callback(data);
      },
      error: function (XMLHttpRequest, textStatus) {
        if (XMLHttpRequest.status == "401") {
            window.parent.location = '...';
            self.location = '...';
        } else {
            alert(XMLHttpRequest.responseText);
        }
      }
    });
}

那么，我们应该如何避免回调金字塔呢？很显然，我们可以将它与promise结合，代码如下：

function ajax(url, data, callback) =>
    new Promise((resolve, reject) => {
        $.ajax({
            url: url,
            type: data == null ? 'GET' : 'POST',
            dataType: "json",
            data: data == null ? '' : JSON.stringify(data),
            async: true,
            contentType: "application/json",
            success: function (data) {
                callback(data);
                resolve();
            },
            error: function (XMLHttpRequest, textStatus) {
                if (XMLHttpRequest.status == "401") {
                    window.parent.location = '...'
                    self.location = '...'
                } else {
                    alert(XMLHttpRequest.responseText);
                }
                reject()
            }
        })
    })  
}

当然，这是不熟悉jQuery的同学，或者考虑长线Promise的，但是jquery也为我们提供了按顺序调用多个$.ajax()的方案，那就是deferred，它模拟了promise的实现，有兴趣的同学可以查看源码，看它是如何实现的。实例代码如下：

$.ajax({
    url:'./a'
}).then(function(){
    return $.ajax({ url:'./b' });
}).then(function(){
    return $.ajax({ url:'./c' });
}).then(function(){
    return $.ajax({ url:'./d' });
}).then(function(){
    //TODO here
});

promise存在的问题

• promise一旦执行，无法中途取消
• promise的错误无法在外部被捕捉到，只能在内部进行预判处理
• promise的内如何执行，监测起来很难

正是因为这些原因，es7引入了更加灵活多变的async，await来处理异步。

这个稍后，后续可能还会继续修改，也欢迎各位批评指正。有问题或者有其他想法的可以在我的GitHub上pr。