Async/await 在 createAsyncThunk

时间:2021-06-10 05:54:49

标签: reactjs typescript redux

在使用 createAsyncThunk 时,我无法尝试在 for 循环中使用异步等待。我希望 dispatch(performRunAllCells()) 会按顺序为 updateBrowser() 数组中的每个 cell 同步调用 API editor.cells。相反,调度导致 updateBrowser() 被一次性异步调用。这里发生了什么?

export const performRunAllCells = createAsyncThunk(
  'editor/runAllCells',
  async (_, { dispatch, getState, rejectWithValue }) => {
    const { notebook: { selectedDataset } } = getState() as {notebook: {selectedDataset: string}};
    const { editor } = getState() as {editor: EditorState};

    try {
      let results: DataEntity | undefined;
      for (const cell of editor.cells) {
        dispatch(setCellStatus({ id: cell.id, execStatus: '*' }));
        results = await updateBrowser(selectedDataset, cell.editorContent);
        dispatch(setCellStatus({ id: cell.id }));
      }
      return results;
    } catch (e) {
      return rejectWithValue(e.response.data);
    }
  },
);

编辑

目前我正在使用 setTimeout 测试 updateBrowser()

export async function updateBrowser(selectedDataset: string, editorContent: string): Promise<DataEntity> {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('test');
      resolve({
        raw: editorContent, html: 'Test', console: 'Test',
      });
    }, 3000);
  });
}

我能够通过上面的控制台日志知道它是同步还是异步。目前,它正在一次打印多个“测试”。

1 个答案:

答案 0 :(得分:0)

没关系。我在其他地方犯了一个错误,实际上并没有调用代码。修复后现在可以使用了。