Redux Toolkit 错误处理问题

Question

我创建了一个端点来获取用户数据并配置了我的应用程序。它运作良好，但需要问有没有办法创建全局错误处理程序？例如，如果我想将用户重定向到外部网站的任何请求出现错误status === 400。

const headers = {
  Accept: 'application/json',
  'Content-Type': 'application/json',
};

const baseUrl = '/api';

const createRequest = (url, method) => ({ url, method, headers });

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl }),
  endpoints: (builder) => ({
    getUser: builder.query({
      query: () => createRequest('/user/get', 'GET'),
    }),
  }),
});

Answer 1

您可以创建一个通用请求文件，并将该文件用于每个请求调用，如果错误代码为 400，您可以在 catch 中设置重定向逻辑。我们使用相同的方式来处理未经授权的用户请求。

这是基本代码，

import axios from 'axios';

const request = (method = 'get', url, requestPayload = {}) => new Promise((resolve, reject) => {
  const token = localStorage.getItem('token');
  const preparedRequest = {
    method,
    url: `${process.env.REACT_APP_API_BASE_URL}${url}`,
    data: requestPayload,
    headers: {
      Authorization: `Bearer ${token}`
    }
  };
  axios(preparedRequest)
    .then((data) => resolve(data.data))
    .catch((err) => {
      if (err.response?.status === 401) {
        localStorage.removeItem('token');
        window.location.href = '/login';
      }
      reject(err);
    });
});

export default request;

您可以根据您的要求覆盖此功能。