Promise.then链式调用中嵌套setTimeout返回值为undefined的问题及解决方法

这是个非常典型的异步操作适配Promise链的问题，我来给你拆解清楚原因和解决办法：

问题根源 #

先看你出问题的那段代码里的第二个then回调：

.then((val1)=>{setTimeout(function(val1){console.log(val1); return 'Finished';},1000)})

这里有两个关键问题：

1. 箭头函数没有显式返回值：这个then的回调函数只执行了setTimeout，但没有return任何内容，所以默认返回undefined，直接传给了下一个then的val2。
2. setTimeout内部的return无效：setTimeout的回调函数里的return 'Finished'完全没用——因为这个回调是在异步队列里单独执行的，它的返回值不会被外层的then捕获，和Promise链完全脱节。

而你第一个正常的例子里，每个then的回调都返回了具体的值（比如return 'Wait....'），Promise会自动把这个值包装成一个resolved状态的Promise，传给下一个then，所以能正常传递值。

解决办法：把setTimeout包装成Promise #

要让Promise链等待setTimeout完成，我们需要把setTimeout的异步操作封装成一个Promise，让then的回调返回这个Promise，这样下一个then就会等待这个Promise resolve后再执行，并且拿到resolve的值。

步骤1：封装延迟函数 #

先写一个通用的延迟函数，把setTimeout转换成Promise：

function delay(time, value) {
  return new Promise(resolve => {
    setTimeout(() => {
      // 延迟结束后，把要传递的值resolve出去
      resolve(value);
    }, time);
  });
}

步骤2：修改Promise链 #

用这个延迟函数替换原来的直接setTimeout调用，确保每个then的回调返回Promise：

let cond_1 = true;
let data = 'Data Received....';
let err = 'Error';
var p1 = new Promise(function(resolve,reject){
 if(cond_1){
 resolve(data);
 }else{
 reject(err);
 }
})

function delay(time, value) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(value);
    }, time);
  });
}

p1.then((data)=>{
  console.log(data); 
  return 'Wait.....'; 
})
.then((val1)=>{
  // 返回一个Promise，等待1秒后resolve 'Finished'
  return delay(1000, val1).then(resolvedVal => {
    console.log(resolvedVal);
    return 'Finished';
  });
})
.then((val2)=>{
  return delay(1000, val2).then(resolvedVal => {
    console.log(resolvedVal);
  });
})
.catch((err)=>{console.log(err)});

更简洁的写法：用async/await #

如果你的环境支持ES2017+，可以用async/await让代码更易读，避免嵌套：

p1.then(async (data)=>{
  console.log(data); 
  return 'Wait.....'; 
})
.then(async (val1)=>{
  // 等待1秒
  await delay(1000);
  console.log(val1);
  // 返回的值会自动包装成Promise
  return 'Finished';
})
.then(async (val2)=>{
  await delay(1000);
  console.log(val2);
})
.catch((err)=>{console.log(err)});

修正后的输出 #

运行修正后的代码，你会得到和第一个正常例子一样的输出，只是每个内容之间间隔1秒：

Data Received....
Wait.....
Finished

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