学了ES6，还不会Promise的链式调用？🧐

前言

本文主要讲解promise的链式调用的方法及其最终方案

应用场景

假如开发有个需求是先要请求到第一个数据，然后根据第一个数据再去请求第二个数据，再根据第二个数据去请求第三个数据...一直到最后得到真正想要的数据，我最初的做法是

setTimeout(() => {
//这里用定时器来代替发请求
//data假设为后台来的数据
let data1 = 1;
console.log(data1);
setTimeout(() => {
let data2 = 2 + data1;
console.log(data2);
setTimeout(() => {
let data3 = 3 + data2;
console.log(data3);
setTimeout(() => {
let data4 = 4 + data3;
console.log(data4);
}, 100);
}, 100);
}, 100);
}, 100);

显然代码是没有任何问题的，但是如果在每次都在获取数据过来还要进行数据的处理呢？那这种代码就变得晦涩难懂且难以维护，搞不好维护你代码的人****。于是这种情况下，Promise就是一个很好的选择。

以上代码就会变成这样的形式

//链式调用
p.then(value=>{

},reason=>{

}).then(value=>{

},reason=>{

})

接下来我们就一起来学习Promise的链式调用吧

实现方法

原理：每次调用then方法都return一个promise对象，因为promise带有then方法，这样就可以在上一个then后面再调用then方法。

const p = new Promise((resolve, reject) => {
let data1 = "data1"; //后台获取到data1
console.log(data1);
resolve(data1);
});
p.then((res) => {
return new Promise((resolve, reject) => {
let data2 = res+"data2"; //后台获取到data2
console.log(data2);
resolve(data2);
});
}).then((res) => {
console.log(res);
});
// data1
// data1data2
// data1data2

看到这里，就会有人问了，这个代码也好看不到哪里去啊，怎么就是一个好的选择了，先等下，还没出最终答案呢

刚刚我们说到，链式调用的原理是每次都在then方法里面返回一个promise对象，通过资料查询，我们会发现Promise的resolve方法返回的就是一个Promise对象

于是刚刚的代码就可以改成下面的形式

const p = new Promise((resolve, reject) => {
let data1 = "data1"; //后台获取到data1
console.log(data1);
resolve(data1);
});
p.then((res) => {
let data2 = res + "data2"; //后台获取到data2
console.log(data2);
return Promise.resolve(data2);
}).then((res) => {
console.log(res);
});
// data1
// data1data2
// data1data2

现在看起来是不是舒服很多，但是其实刚刚搜索resolve方法的时候你还会发现，then方法其实返回的也是一个Promise对象

这样子，最后方案就出来了

const p = new Promise((resolve, reject) => {
let data1 = "data1"; //后台获取到data1
console.log(data1);
resolve(data1);
});
p.then((res) => {
let data2 = res + "data2"; //后台获取到data2
console.log(data2);
return data2;
}).then((res) => {
console.log(res);
});
// data1
// data1data2
// data1data2

万物皆有裂痕，是光进来的地方

参考来源

• 尚硅谷es6-11视频