异步无处不在：Promise 破除“回调地狱”（三）-技术圈

(｡･∀･)ﾉﾞ嗨，我是你稳定更新、干货贼多的勾勾。

前两篇讨论了异步模式和回调函数，结尾谈到了令人头皮发麻的回调地狱。

要想拯救出回调地狱的代码，只有请我们的 Promise 出山了。

拯救头发小斗士，出发！

Promise

Promise 译为承诺、许诺、希望，意思就是异步任务交给我来做，一定（承诺、许诺）给你个结果。

在执行的过程中，Promise 的状态会修改为 pending。一旦有了结果，就会再次更改状态。

异步执行成功的状态是 Fulfilled , 这就是承诺给你的结果。状态修改后，会调用成功的回调函数 onFulfilled 来将异步结果返回。

异步执行成功的状态是 Rejected，这就是承诺给你的结果。然后调用 onRejected 说明失败的原因（异常接管）。

如果将前面对 ajax 函数的封装，改为 Promise 的方式，结果又会是什么？

Promise 重构 Ajax 的异步请求封装

function myAjax(url) {    return new Promise(function (resolve, reject) {        var xhr = new XMLHttpRequest();        xhr.onreadystatechange = function () {            if (this.readyState == 4) {                if (this.status == 200) {                    // 成功的回调                    resolve(this.responseText)                } else {                    // 失败的回调                    reject(new Error());                }            }        }
        xhr.open('get', url)        xhr.send();    })}

还是前面提到的逻辑，如果返回的结果中，又有 ajax 请求需要发送，可一定记得使用链式调用，不要在 then 中直接发起下一次请求，否则，又是地狱相见了。

//  ==== Promise 误区====myAjax('./d1.json').then(data=>{    console.log(data);    myAjax('./d2.json').then(data=>{        console.log(data)        // ……回调地狱……    })})

链式的意思就是在上一次 then 中，返回下一次调用的 Promise 对象，我们的代码就不会进地狱了。

myAjax('./d1.json')    .then(data=>{    console.log(data);    return myAjax('./d2.json')})    .then(data=>{    console.log(data)    return myAjax('./d3.json')})    .then(data=>{    console.log(data);})    .catch(err=>{    console.log(err);})