javascript - 什么是延迟api调用的好方法？

Question

在我的应用程序(React + Redux + axios + redux-thunk + Typescript)中，当我进行 API 调用、更改数据库中的项目并在表中显示当前的更改状态时，我遇到了这种情况。所以，它看起来像:const changeItem = () => changeItemState(item.id).then(getItem(item.id));两个操作( changeItemState 和 getItem )都是从 reducer 文件导入的。问题是，在后端站点上更改项目流程需要太长时间。所以，我重新加载表(调用 api 获取项目 - getItem(item.id) )但后端更改过程仍在进行中，所以我收到旧状态。之后 100-300 毫秒 我可以再次查询项目(例如刷新页面)并获取项目的新状态。但我不想手动操作。我想重新加载表 在 之后后端准备了我的项目以显示新状态。
问题是 - 如何延迟获取项目操作？是否有任何前端模式？我想避免使用这样的“setTimeout()”方法(imo 这不是一个理想的解决方案):const changeItem = () => changeItemState(item.id).then(setTimeout(function(){ getItem(item.id); }, 300)); ,

Answer 1

你可以 promise setTimeout像这样:

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

然后，

const changeItem = () =>
  changeItemState(item.id)
    .then(() => delay(300))
    .then(() => getItem(item.id));

或等效地使用异步函数

const changeItem = async () => {
  await changeItemState(item.id);
  await delay(item.id);
  return getItem(item.id);
}