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

Posted 2023-02-19

【中文标题】MirageJs：如果我通过直通调用 api，则无法使用 axios

【英文标题】：MirageJs: cannot use axios if I call api with passthrough

【发布时间】：2021-11-10 20:36:19

【问题描述】：

我有一个应用程序与切片和重击作出反应。 我使用@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透传的问题。

有什么想法吗？？

非常感谢

【问题讨论】：

嗨@foralobo，你找到解决办法了吗？我遇到了同样的问题，我的调试告诉我，如果我们使用 axios，响应会被伪装者.js 弄乱，miragejs 使用它来劫持调用，但如果我进行提取，传递按预期工作。

这里也一样。看起来问题是在 axios 0.21.2 中引入的

【参考方案1】：

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

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