时间戳

首页 > 解决方案 > MirageJs：如果我通过直通调用 api，则无法使用 axios

reactjs - MirageJs：如果我通过直通调用 api，则无法使用 axios

问题描述

我有一个应用程序与切片和重击作出反应。我使用@reduxjs/toolkit，并使用“createSlice”api 创建了切片，并使用“createAsyncThunk”创建了 thunk。

我的想法：

export const loginThunk = createAsyncThunk('login/local', async (loginData: LoginData) => {

    const {username, password} = loginData;
    
    const l = await axios.post(`${BASE_URL}_login/local`, {username, password}, {
        headers: {'Content-Type': 'application/json'}
    })
    return l.data;
})

在我的应用程序中，在我的真实服务器上运行带有模拟 api 和“直通”的 mirage 服务器。

当我发送“loginThunk”thunk 时，它会在我的减速器中运行“loginThunk.pending”案例并停止。

永远不会实现或拒绝。

如果我在没有运行 mirage 服务器的情况下发送“loginThunk”thunk，它就可以工作。

如果我在没有运行 mirage 服务器的情况下发送“loginThunk”thunk，但我使用“fetch”而不是 axios，它就可以工作。

似乎是 axios 和 mirageJs passthrough 之间的问题。

有任何想法吗？？

太感谢了

标签： reactjsreduxaxiosmiragejs

解决方案

原来问题源于在 axios 0.21.2 中更改的xhr适配器。处理程序request.onreadystatechange不再添加到请求中（XMLHttpRequest似乎在您启动 mirageJS 服务器时重新定义）。

解决方案是创建您自己的适配器 - 基本上复制 lib/adapters/xhr.js 并确保语句的else分支if通过 - 并在您的 axios 配置中使用它。

推荐阅读