是否可以在 axios.interceptors 中使用 toast ？

Question

我用来react-toastify显示通知。每当收到状态代码为 401 的响应时，我想用 toast 显示错误。但是，不会触发任何通知。这是否可能（使用 axios 拦截器）？

这是我的代码：

import {Toast as toast, ToastContainer} from "react-toastify";

...
axios.interceptors.response.use(function (response) {
  return response.data;
}, function (error) {
  if (error.response.status === 401) {
    toast.error("Unauthorized");
  }
  return Promise.reject(error.data);
});

const renderApp = Component => {
  ReactDOM.render(
    <Provider store={store}>
      <I18nextProvider i18n={i18n}>
          <BrowserRouter>
              <Component />
          </BrowserRouter>
          <ToastContainer {...defaultToastProps}  />
        </I18nextProvider>
    </Provider>,
    rootElement
  );
};

Answer 1

您可以react-toastify非常轻松地与 axios 拦截器一起使用。我认为您的导入不正确，正如 @Estus Flask 提到的。

这是一个完整的示例，但在本例中，我正在全局处理 HTTP 500 以及catch.

添加ToastContainer到index.js.

// index.js
...
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

ReactDOM.render(
  <React.StrictMode>
    <ToastContainer
    position="top-center"
    autoClose={5000}
    hideProgressBar={false}
    newestOnTop={false}
    closeOnClick
    rtl={false}
    pauseOnFocusLoss
    draggable
    pauseOnHover
    />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
...

然后在拦截器中，您可以为所需的状态代码创建 toast：

// api-interceptor.js
import axios from 'axios';
import { toast } from 'react-toastify';

const errorHandler = (error) => {
  if (error.response.status === 500) {
    toast.error(`${error.response.data.detail}`, {
      position: "top-center",
      autoClose: false,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: 0,
      });  
  }

  return Promise.reject({ ...error })
}

// axios instance for making requests 
const axiosInstance = axios.create();

// response interceptor for handling common errors (e.g. HTTP 500)
axiosInstance.interceptors.response.use(
  (response) => {return response},
  (error) => errorHandler(error)
  );

export default axiosInstance;

然后，您的组件可以导入 axios 实例并正常使用它，因为您知道常见错误（例如 HTTP 500）会得到一致的处理，而其他错误（例如 HTTP 403）则由组件处理。

// login-button.js
import axios from '../utils/api-interceptor';
import { toast } from 'react-toastify';

...
    const response = await axios.post(`/api/users/login`, values)
      .catch(function (error) {
        if (error.response.status === 403) { 
          toast.error("Unauthorized", {
            position: "top-center",
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: 0,
            });  
        }
        });
...