链接 Axios 请求

Question

我遇到了一个让我很困惑的问题。我正在尝试运行 deleteRecord，然后一旦完成，我希望运行 searchRecords。

这里是删除记录

import axios from 'axios';


export const deleteRecord = (
    records: string,
) => {

    return axios
        .post('examplePath1', {
            itemNumbers,
            deleteAll,
        })
        .catch((error) => {
            if (setIsLoading) {
                setIsLoading(false);
            }
            console.log(error);
            
            throw error;
        });
};

这里是搜索记录：

import axios from 'axios';

export const searchRecords = () => {
    return (dispatch, getState) => {
        dispatch(updateState('loading', true));

        const parameters = getSearchParameters(getState());

        axios
            .get('searchRecords', { params })
            .then((response) => dispatch(loadData(response.data)))
            .catch((error) =>
              console.log(error);
            )
            .finally(() => dispatch(updateState('loading', false)));
    };
};

在一个单独的文件中，我导入了deleteRecord 和searchRecords，然后尝试执行以下操作：

import axios from 'axios';
const handleDelete = () => {
    setIsLoading(true);

    deleteRecord (record)
        .then(() => {
            searchRecords();
        })
        .catch((error) => {
            console.error(error);
        })
        .finally(() => {
            setIsLoading(false);
        });
};

<Button onClick={handleDelete}> Click Me! <Button/>

所以当我点击按钮时，它会点击handleDelete，然后就可以完成删除了。但我看到的是，它将到达 handleDelete 的“then”部分中的 searchRecords，然后什么都不做。它不会转到 searchRecords。它会跳过它并转到我更改加载状态的“最后”部分。

我不确定我在这里错过了什么，因为我见过他们使用 .then() 链接这些调用的示例。当我调试时也没有弹出错误。

如果有人能够指出一些有帮助的事情，我将不胜感激。

Answer 1

所以当我点击按钮时，它会点击

handleDelete

，并完成 删除就好了。但我所看到的是它会到达

searchRecords

在

handleDelete

的“然后”部分，然后执行 什么也没有。

deleteRecord

只是一个返回 Promise 的常规 Javascript 函数，因此可以将其链接起来。问题似乎是

searchRecords

似乎是一个 Thunk，例如异步 Redux 操作。

searchRecords

需要派送到店。可以等待它的结果，或者你可以简单地返回它返回的 Promise。

const dispatch = useDispatch();

...

const handleDelete = () => {
  setIsLoading(true);

  deleteRecord(record)
    .then(() => {
      return dispatch(searchRecords());
    })
    .catch((error) => {
      console.error(error);
    })
    .finally(() => {
      setIsLoading(false);
    });
};

或使用

async/await

和

try/catch

书写：

const dispatch = useDispatch();

...

const handleDelete = async () => {
  setIsLoading(true);

  try {
    await deleteRecord(record);
    await dispatch(searchRecords());
  } catch(error) {
    console.error(error);
  } finally {
    setIsLoading(false);
  }
};