学了ES6，还不会Promise的链式调用？-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51867392/article/details/120944289

本文探讨如何使用Promise进行链式调用，解决在JavaScript中处理多个异步操作的问题。通过实例展示从传统回调方式转换为Promise链式调用的过程，强调其在处理复杂依赖顺序的数据请求时的优势。并逐步解析Promise链式调用的实现原理，最终提供了一个简洁的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本文主要讲解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