使用setTimeout触发Redux Action结合Fetch处理Promise链遇问题

我看你现在的代码里有个关键问题：你把products这个async函数直接传给了resolve，但async函数本身是一个函数，不是它执行后返回的Promise结果。咱们一步步来修正：

首先，先看修正后的完整代码：

const products = async () => { 
  const response = await fetch('http://localhost:3009/products'); 
  const data = await response.json(); 
  return data 
}
const TIMEOUT = 100

export default {
  getProducts: (cb, timeout) => setTimeout(async () => {
    // 直接调用products()获取它返回的Promise
    const data = await products();
    cb(data);
  }, timeout || TIMEOUT),
}

具体的修改点和原因： #

• 把setTimeout里的回调改成async函数，这样就能直接用await来等待products的异步结果，比嵌套then更简洁易读。
• 之前的new Promise(resolve => resolve(products))完全没必要，因为products()本身就返回一个Promise，直接调用它并用await接收结果即可。
• 如果你更习惯用.then()的写法，也可以改成这样：

getProducts: (cb, timeout) => setTimeout(() => {
  products().then(data => cb(data));
}, timeout || TIMEOUT),

这样就能保证：先等待指定的超时时间，然后发起fetch请求，等请求完成拿到数据后，再调用传入的Redux action（cb函数）。

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