在axios.interceptors中可以使用toast吗？

Question

我正在使用react-toastify显示通知。每当收到状态代码为401的响应时，我都希望显示toast的错误。但是，不会触发任何通知。这是可能的(使用axios intereceptors)吗？

这是我的代码：

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所提到的。

这是一个完整的示例，但是在这个实例中，我全局处理HTTP500和catch中的登录错误(HTTP403)。

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