为什么反应查询需要异步 api 调用？

Question

每篇文档都显示异步调用与 react-query 一起使用，但我有点困惑为什么这些是必要的，因为以下代码在有或没有 async/await:

的情况下都有效

export const apiCall = (method, path, data) => {
    return axios({method, url: API_PREFIX + path, data})
        .then(resp => resp.data)
        .catch(error => {

        });
};

export const useData = () => {
    const {data, isLoading, error, refetch} = useQuery(
        'users',
        async () => await apiCall(dispatch, 'get', '/some-endpoint'),
    );

    return {
        userList: data,
        refetch,
        isLoading
    }
}

Answer 1

react-query 希望您 return 已解决或已拒绝的承诺 - 您可以根据需要生成此承诺。 JavaScript 有很多选项可以产生承诺。 async / await 基本上只是承诺与 .then 和 .catch.

链接的替代语法

您 post 编写的代码也可以工作，但是，它也有一些不必要的部分：

async () => await apiCall(dispatch, 'get', '/some-endpoint'),

这里不需要 async / await，因为 apiCall 已经 return 是一个 Promise，所以这也是一样的：

() => apiCall(dispatch, 'get', '/some-endpoint'),

此外，我不会 .catch 在 apiCall 函数中，因为它会将失败的 Promise 转换为成功的 Promise。使用 react-query，您确实希望将失败的 Promise returned 到 react-query，以便库可以为您进行错误处理。否则，它不知道错误并且不能重试/不能给你错误状态等。

所以对于 apiCall，这两件事也是等价的，并且可以很好地与 react-query 一起工作：

export const apiCall = (method, path, data) => {
    return axios({method, url: API_PREFIX + path, data})
        .then(resp => resp.data)
};

export const apiCall = async (method, path, data) => {
    const response = await axios({method, url: API_PREFIX + path, data})
    return respons.data
};

这实际上只取决于您更喜欢哪种语法 - 大多数人更喜欢 async / await，因为它避免了过多的回调链。

我也写了一篇关于这个主题的比较全面的博客 post：https://tkdodo.eu/blog/about-async-functions

为什么反应查询需要异步 api 调用？

Why are async api calls necessary with react-query?

reactjs

async-await

react-query