reactjs - 是否可以在 axios.interceptors 中使用 toast?
问题描述
我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
);
};
解决方案
您可以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,
});
}
});
...
推荐阅读
- python - 如何通过 fit_generator 为 Keras 模型提供多个输入
- android - 我如何让一个方法在android中重复运行?
- angular6 - ng-select:不要在自定义模板标签单击时打开下拉菜单
- android - 取消参考参考视图
- arrays - vb.net 数组和或运算符
- date - Google 表格:移动每日、每周、每月和每年的平均值
- python - 如何绘制遵循特定分布的直方图?
- python - 具有未知 batch_size 的 Keras repeat_elements
- java - Eclipse 2018 中未安装 Android 支持库
- c - 将“ifdef”放在源文件的第一行有什么意义?