将"回调地狱"按在地上磨擦的Promise

2019年8月22日 179次阅读 来源: 风吹过的夏夜

这是一段旁白

“异步虐我千百遍，我待异步如初恋”！！
做前端的同砚做异步一定都不生疏。由于JavaScript是单线程言语(也就是说不支撑多线程编程，这不是空话么啊喂！)，所以在JavaScript中处置惩罚异步题目也是经过了几代人的踩坑和拓荒才有了本日的“花狸狐哨”的处理方案。

回调(CallBack)

应用回调来完成异步是一向以来异常有用的处理方案，而且经久不衰。其背地的道理很简朴，就是应用JavaScript中能够将函数作为参数传入另一个函数(万物皆对象)。举个栗子：

function callBack() {
    console.log('回调啦回调啦！！！');
}

function main(cb) {
    console.log('我会运转良久！')
    cb();
}

main(callBack);

下面一段代码中完成两个函数 callBack 和 main。随后将 callBack 传入到 main 函数中，当 main 函数实行到一个阶段时刻会挪用传入的回调函数 ( 此处是当main函数运转到底部时刻就挪用了回调函数 )。运转效果显而易见：

《将

如许的写法看起来貌似还行，写法简朴明了，一看就懂。然则这里笔者要吐槽下客岁自身的智商，且听逐步道来：
客岁在重构项目的时刻，有一个页面须要展现 4 个下拉框而且下拉框的数据须要从背景拉取。所以笔者在ComponentWillMount(React项目)要领中实行了拉取数据的行动而且是离开自力拉取，相似于：

......

ComponentWillMount() {
    let data = {};
    fetchSelect1();
    fetchSelect2();
    fetchSelect3();
    fetchSelect4();
}

......

末了在四个要领中将数据存储到 data 对象中以供衬着挑选框，然则背面涌现了一个意想不到题目：总会有一个下拉框数据拉取失利。所以不得已采用了回调体式格局来处置惩罚，这里再狠狠得吐槽一下自身，假如那时刻会用Promise，也不会那末为难。下面贴一下当时的代码：

/* fetch data source prop selects */
router.get("/fetch-selects", function(req, resp, next) {
    let path1 = config.BACKEND_API.BASE_URL + '/datasource/frequency';
    var reponseData = {};
    httpAgent.httpRequest({}, "JSON", config.BACKEND_API.TYPE, config.BACKEND_API.HOST, config.BACKEND_API.PORT, path1, "GET", function(data) {
        reponseData.frequency = data;
        let path2 = config.BACKEND_API.BASE_URL + '/datasource/category';
        httpAgent.httpRequest({}, "JSON", config.BACKEND_API.TYPE, config.BACKEND_API.HOST, config.BACKEND_API.PORT, path2, "GET", function(data) {
            reponseData.category = data;
            let path3 = config.BACKEND_API.BASE_URL + '/datasource/type';
            httpAgent.httpRequest({}, "JSON", config.BACKEND_API.TYPE, config.BACKEND_API.HOST, config.BACKEND_API.PORT, path3, "GET", function(data) {
                reponseData.type = data;
                let path4 = config.BACKEND_API.BASE_URL + '/datasource/process/type';
                httpAgent.httpRequest({}, "JSON", config.BACKEND_API.TYPE, config.BACKEND_API.HOST, config.BACKEND_API.PORT, path4, "GET", function(data) {
                    reponseData.process = data;
                    resp.json(reponseData);
                }, function(code, body) {

                })
            }, function(code, body) {

            })
        }, function(code, body) {

        })
    }, function(code, body) {

    })
});

当时用的Node项目做的中心层，这是一个路由。能够看出来实在就是在拉取完第一条数据后再挪用另一个函数来拉取第二条数据，云云嵌套下去。幸亏只须要拉取 4 条数据，那假如有10条以致100条数据须要拉取怎么办？那岂不是须要嵌套出一个很深很深的代码组织么？这就是臭名远扬的“回调地狱”。“回调地狱”的题目在于写法过于烦琐不够文雅、代码保护炒鸡蛋疼，所以一向被前端递次猿所诟病，尤其是保护相似代码的时刻几乎日了一群哈士奇。不仅仅是想死的心了，完整想删库走人啊喂！

Promise

当前端异步事变处于水深火热中时，一个好汉踏着七彩祥云而来，他，就是 Promise。让我们置信：一个许诺，究竟会被兑现。

Promise的由来

Promise 先由社区提出来的观点，主如果用于处理前端的异步题目，光荣的是它在ES6中也得到了完成。

什么是Promise

Promise 是一个状况机。这么说能够有点不好懂，上个代码先：

new Promise(function(resolve, reject) {
    try {
        resolve('Success')
    } catch (e) {
        reject(e);
    }
})

从上面能够看出几个主要的点：
1，Promise是一个组织函数。
2，新建Promise对象须要传入实行器函数 (executor function)。
3，实行器函数中有两个参数 resolve 和 reject。这两个也是实行器函数。

对此来诠释下什么叫状况机
Promise对象有三个状况：pending, fulfilled, rejected，没图说个JB？

《将

从图中能够看出，Promise对象的初始状况是pending ，假如经过了 resolve 要领，状况置为 fulfilled ；假如经过了 reject 要领，状况置为 rejected 。而且有三点须要明白：
1，Promise对象的状况转换只要 pending--->fulfilled 或许 pending--->rejected。没有别的情势的转换。
2，Promise 对象的状况一经转换则永远凝结，意义就是说比方状况被置为 fulfilled 后，没法再回到 pending。
3，Promise对象状况以resolve 和 reject为分水岭。挪用这个两个要领之前，都处于pending状况。

Promise.resolve()

Promise.resolve(value)要领返回一个以给定值 value 剖析后的
Promise 对象

摘自MDN对 Promise.resolve() 的诠释。简朴的明白就是它用来返回使命实行胜利后的返回值。Promise对象挪用完这个要领后状况就被置为 fulfilled。

Promise.reject()

Promise.reject(reason)要领返回一个带有谢绝缘由reason参数的
Promise 对象

摘自MDN对 Promise.reject() 的诠释。Promise对象挪用完这个要领后状况就被置为 rejected。

Promise.prototype.then()

看到这里能够会有这么一个题目：既然Promise用 resolve 和reject 返回处置惩罚效果，那怎样猎取到这个效果呢？那末then()就大有可为了。从小题目能够看出 then 要领被放在Promise的原型上，也就是说任何一个Promise对象都能够挪用这个要领，不论何时何地。then()要领的参数为两个个实行器函数，第一个函数用来处置惩罚 resolve() 返回值，第二个函数用来处置惩罚 reject() 返回值。而且then()返回的也是一个 Promise 对象。举个🌰：
起首模仿 resolve() 返回

new Promise(function(reslove, reject) {
    try {
        reslove('Success')
    } catch (e) {
        reject(e);
    }
}).then(function(reslove_response) {
    console.log(reslove_response);
}, function(reject_response) {
    console.log(reject_response);
})

实行效果：

《将

起首模仿 reject() 返回

new Promise(function(reslove, reject) {
    try {
        throw new Error('发作毛病了！')
    } catch (e) {
        reject(e);
    }
}).then(function(reslove_response) {
    console.log(reslove_response);
}, function(reject_response) {
    console.log(reject_response);
})

运转效果：

《将

搜检 then() 返回的对象范例

let promise = new Promise(function(reslove, reject) {
    try {
        throw new Error('发作毛病了！')
    } catch (e) {
        reject(e);
    }
}).then(function(reslove_response) {}, function(reject_response) {})

console.log(promise instanceof Promise)

运转效果：

《将

运转状况如料想一样。

说到这里会不会有如许一个题目：为何这几个要领都是返回一个Promise对象？ 请接着往下看。

Promise 链式挪用

什么叫链式挪用？

简朴的来讲就是酱紫的：

new Promise(function() {}).then(function() {}).then(function()).....

就是挪用完 then() 今后还能够继承 then 下去，而且我们前面说了只要Promise对象里有then()要领，所以每一个要领都须要返回一个Promise对象以支撑链式挪用。而且下一个then()能够拿到前一个then()的返回值，条件是前一个then()确实返回了一个值，继承举🌰：

new Promise(function(resolve, reject) {
    resolve(1);
}).then(function(result) {
    return result + 1;
}).then(function(result) {
    return result + 1;
}).then(function(result) {
    console.log(result + 1);
})

我们拿一个数字 1 出来，而且一向通报下去，每到一个then都给它加 1，终究效果是4。亲测无误，这就是Promise链式挪用的基本情势，写法相对于回调函数那几乎是一个文雅。别的，Promise的链式挪用笔者以为用的最多的处所就是一连处置惩罚多个使命，而且后一个使命须要用到前一个使命的返回值。假如不大明白，请再瞄一下方才的例子。

Promise.prototype.catch()

catch()这个要领人人都很熟习，就是去捕捉一个毛病，当然在Promise里也是一样的作用。平常状况下会与链式挪用搭配起来用，它会捕捉前面任一步所抛出(reject 或许 throw)的毛病。🌰来了：

new Promise(function(resolve, reject) {
    resolve(1);
}).then(function(result) {
    return result + 1;
}).then(function(result) {
    return result + 1;
}).then(function(result) {
    throw new Error('失足啦！')
}).catch(function(err) {
    console.log(err);
})

运转效果：
《将

注：catch()实际上是then(null,function(){})的语法糖，将上述例子中的catch改成后者一样有用

Promise.all()

all()这个要领就厉害了。我们能够向个中传入一个可迭代的对象，对象中存有多个待实行的使命，Promise.all()会递次实行并将效果根据原使命递次存入数组返回或许当碰到任何一个使命失足的时刻会抛出响应毛病而且不做任何返回。🌰：

let p1 = 'Promise1';
let p2 = Promise.resolve('Promise2');
let p3 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 200, 'Promise3');
});

Promise.all([p1, p2, p3]).then(function(values) {
    console.log(values);
});

运转效果：

《将

Promise.race()

race()要领的参数与all()的参数一致，不过差别的是，all()要领须要悉数实行直到悉数实行胜利或许恣意一个使命实行失利。而race()只须要比及某一个使命实行终了(不论是胜利照样失利)；🌰：

let p1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, 'promise1');
});

let p2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 200, 'promise1');
});

Promise.race([p1, p2]).then(function(value) {
    console.log(value);
});

实行效果：

《将

Promise走进科学

下面我们来翻开脑洞，经由过程几个情形来猜想效果

题目：Promise链式挪用时刻(尾部包括catch())，假如中心的then()失足了会影响碰面then的运转吗？

new Promise(function(resolve, reject) {
    resolve(1);
}).then(function(result) {
    console.log(result);
    return result + 1;
}).then(function(result) {
    console.log(result);
    return result + 1;
}).then(function(result) {
    throw new Error('中心报错啦！')
    console.log(result);
    return result + 1;
}).then(function(result) {
    console.log(result);
    return result + 1;
}).catch(function(err) {
    console.log(err);
})

运转效果：

《将

结论：运用Promise链式挪用，一旦某个使命失足将会直接住手向下挪用并抛出毛病

怎样把catch()放在第一个then()前面，背面的then失足的话，毛病会被catch吗？

new Promise(function(resolve, reject) {
    resolve(1);
}).catch(function(err) {
    console.log(err);
}).then(function(result) {
    console.log(result);
    return result + 1;
}).then(function(result) {
    console.log(result);
    return result + 1;
}).then(function(result) {
    throw new Error('中心报错啦！')
    console.log(result);
    return result + 1;
}).then(function(result) {
    console.log(result);
    return result + 1;
})

运转效果：

《将

结论：catch()须要放在Promise链末了，不然没法catch到毛病，只会被实行环境catch

末了笔者用Promise写了一个例子，功用是猎取消息数据而且存储到文本中，运转要领是命令行进入文件夹运转node index.js 就能够了条件是已安装了Node，传送门

好了，也许就这么多了。
在此做一下慨叹：倏忽以为写博客是何等享用的一件事，不论是自身的研究效果照样进修效果经由过程笔墨写出来，自身就是一件了不得的事变，不仅能够对自身晓得的手艺的进一步升华，而且假如还能协助到他人那更是功德无量的事呀；

    原文作者：风吹过的夏夜
    原文地址: https://segmentfault.com/a/1190000015952039
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞