JavaScript使用Promise获取products表数据返回undefined问题

输出undefined是因为Promise链式调用断裂：第一个.then()的回调函数没有返回getProducts(user.id)生成的Promise实例。
Promise链的传值规则是：前一个.then()回调的返回值，会作为后一个.then()的入参；如果回调没有显式写return，默认返回值是undefined，后续链式调用自然拿不到商品数据。
另外原写法还有个隐藏问题：getProducts如果触发reject，外层的.catch()根本捕获不到，因为这个异步调用没有被挂载到当前的Promise链上。

只需要在第一个.then()回调里，把getProducts的调用结果return出去即可：

getUser(10)
 .then((user) => {
    console.log(user);
    // 新增return，把getProducts返回的Promise传递到链路上
    return getProducts(user.id);
   })
 .then(products => console.log(products))
 .catch((err) => console.warn(err))

修复后运行，控制台会按顺序输出：

• 等待2秒后打印用户信息{id:10, name:'najib'}和日志return data
• 再等待2秒后打印日志return product data和商品数组['p1','p2','p3','p4']

如果要写更简洁的链式调用，当回调逻辑简单时可以简写：

getUser(10)
 .then(user => {
    console.log(user);
    return getProducts(user.id);
  })
 .then(console.log) // 直接把console.log作为回调，会自动接收上一步传的products参数
 .catch(console.warn)

如果用async/await语法写，逻辑会更直观，基本不会出现漏return的问题：

async function fetchData() {
  try {
    const user = await getUser(10);
    console.log(user);
    const products = await getProducts(user.id);
    console.log(products);
  } catch (err) {
    console.warn(err);
  }
}
fetchData();

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