Promise的then()方法未按预期工作，如何修复链式调用顺序问题？

嘿，这个问题我太熟了！你肯定是在链式调用Promise的时候，不小心直接执行了第二个函数，而不是把它作为回调传给then对吧？咱们来一步步搞定它～

你之所以会出现两个函数同时执行的情况，核心原因是：你在then()里直接调用了函数（比如写了then(getDataMoreData())），而不是把函数本身作为回调传递给then。这种写法会让getDataMoreData()在第一个Promise还没完成的时候就立即执行，自然就和第一个函数并行运行了。

then()方法的核心是接收一个回调函数——只有当第一个Promise成功resolve后，这个回调才会被触发执行，这样就能保证两个Promise按顺序运行。下面是两种实用的正确写法：

写法1：直接传递函数引用（无需处理前一个结果） #

如果你的第二个函数不需要用到第一个Promise返回的数据，直接把函数名传给then就行：

var getData = function(){ 
  return new Promise((resolve, reject) => { 
    setTimeout(() => { 
      resolve(42); // 5秒后返回初始数据
    }, 5000); 
  }) 
} 

var getDataMoreData = function(){ 
  return new Promise((resolve, reject) => { 
    setTimeout(() => { 
      resolve('获取到更多补充数据'); // 补全你没写完的resolve逻辑
    }, 2000); 
  }) 
}

// 正确调用：传递函数引用，等第一个Promise完成后才会执行getDataMoreData
getData()
  .then(getDataMoreData)
  .then(result => {
    console.log(result); // 先输出42，再2秒后输出'获取到更多补充数据'
  });

写法2：箭头函数包裹（需要处理前一个结果） #

如果你的第二个函数需要用到第一个Promise resolve出来的值，就用箭头函数包裹，把值传递进去：

// 先改造第二个函数，让它接收初始数据作为参数
var getDataMoreData = function(initialData){ 
  return new Promise((resolve, reject) => { 
    setTimeout(() => { 
      resolve(`基于初始数据${initialData}，获取到的详细补充数据`); 
    }, 2000); 
  }) 
}

// 正确调用：用箭头函数接收第一个结果，再调用第二个函数
getData()
  .then(initialData => getDataMoreData(initialData))
  .then(finalResult => {
    console.log(finalResult); // 输出：基于初始数据42，获取到的详细补充数据
  });

你之前大概率是这么写的，才导致了并行执行的问题：

// 错误！这里会立即执行getDataMoreData()，和getData同时启动定时器
getData().then(getDataMoreData());

这种写法里，getDataMoreData()会在调用then()的瞬间就执行，它返回的Promise会被传给then，但此时两个定时器已经同时开始计时了，完全达不到顺序执行的目的。

内容的提问来源于stack exchange，提问作者3gwebtrain