Question

我正在使用react-toastify来显示通知。每当收到状态代码为401的响应时，我都想显示烤面包的错误。但是，不会触发任何通知。（使用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 中的登录错误 (HTTP 403)。

将 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')
);
...

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

// 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,
            });  
        }
        });
...

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

1 个答案: