提问人：usama rashad 提问时间：4/8/2023 更新时间：4/18/2023 访问量：365
从异步 Thunk 返回 Promise 响应
Return Promise response from Async Thunk
问：
我有一个 Axios 承诺是从 asyncThunk 调用的。我正在使用 redux 工具包来捕获响应。但是，我不知道有一种方法可以将承诺调用的实际响应返回到切片的“拒绝”状态。这是我的电话：
export const registerThunk = createAsyncThunk("registerThunk", async (payload: TRegisterPayload) => {
const axios_response = await axios.post("http://127.0.0.1:5000/api/v1/createNewUser", payload);
return axios_response;
});
如何访问处于“已拒绝”状态的错误响应“data”成员？
builder.addCase(registerThunk.rejected, (state, action) => {
state.state = 3;
state.text = "Error";
state.buttonColor = "red";
state.errorMessage = action.error.message as string;
});
通常，如果没有 redux 工具包，我会做这样的事情来获取数据：
const axios_response = await axios.post("http://127.0.0.1:5000/api/v1/createNewUser", payload).catch((err :AxiosError)=>{
err.response?.data; **<--- I can read the error response here**
});
答：
1赞
Shahriar1453
4/9/2023
#1
你可以把你的 thunk 包裹在 try catch 块中。然后将错误发送回切片。
请查看代码示例。
export const registerThunk = createAsyncThunk("registerThunk", async (payload: TRegisterPayload, {
rejectWithValue
}) => {
try {
const axios_response = await axios.post("http://127.0.0.1:5000/api/v1/createNewUser", payload);
return axios_response;
} catch (e) {
return rejectWithValue(e);
}
});
然后，您可以访问被拒绝的数据。
评论
0赞
usama rashad
4/18/2023
你好。感谢您的回答。你的小费得到了回报。我也用“fullfillWithValue”做了一个完整的例子。我将把它作为一个解决方案发布。
2赞
usama rashad
4/18/2023
#2
因此，经过大量研究，我找到了解决我的问题的一个可接受的解决方案。我在这里为新人发布它。
基本上，要返回 promise 的响应，您必须使用“ThunkAPI”中的两个函数“rejectWithValue”和“fulfillWithValue”。这是我更新的 asyncThunk：
export const registerThunk = createAsyncThunk("registerThunk", async (payload: TRegisterPayload, { rejectWithValue, fulfillWithValue }) => {
try {
const registerResponse = await axios.post("http://127.0.0.1:5000/api/v1/createNewUser", payload);
return fulfillWithValue(registerResponse.data);
} catch (e) {
return rejectWithValue(e);
}
});
每当 promise 被拒绝时，“extraReducers”的“rejected”部分就会触发，数据可以在 actions.payload.data 成员中找到，如下所示：
builder.addCase(registerThunk.rejected, (state, action) => {
state.state = 3;
state.text = "Error";
state.buttonColor = "red";
// Keep type cast simple
let typedPayload = action.payload as AxiosError<ServerErrorResponse>;
state.errorMessage = ***typedPayload.response?.data***.serverError.code as string;
});
谢谢
评论