数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物学
数学
英语
经济学
心理学
社会学
时尚学
法学ReactJS – Axios 拦截器
在本文中，我们将学习如何在 React 应用程序中拦截由 Axios 拦截器发送的每个请求或响应。
Axios 拦截器自动添加到用户接收的每个请求或响应中的默认配置。它可用于检查收到的每个响应的响应状态代码。
示例
在此示例中，我们将构建一个 React 应用程序，从我们的 React 应用程序发送 POST 请求时，该应用程序会自动检查并记录服务器发送的状态代码。
我们必须在最全局文件中（即 index.js）设置所有配置，以拦截每个请求/响应。
index.jsx
import React from 'react';
import App from './App';
import ReactDOM from 'react-dom';
import axios from 'axios';
// For GET requests
axios.interceptors.request.use(
(req) => {
// Add configurations here
return req;
},
(err) => {
return Promise.reject(err);
}
);
// For POST requests
axios.interceptors.response.use(
(res) => {
// Add configurations here
if (res.status === 201) {
console.log('Posted Successfully');
}
return res;
},
(err) => {
return Promise.reject(err);
}
);
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);App.jsx
import React, { useEffect, useState } from 'react';
import './App.css';
const App = () => {
const [data, setData] = useState(null);
const [val, setVal] = useState('');
const [fetchData, setFetch] = useState(false);
useEffect(() => {
if (fetchData) {
const payload = {
method: 'POST',
body: JSON.stringify({ title: val }),
};
axios.post('https://jsonplaceholder.typicode.com/posts', payload)
.then((res) => setData(res.data.id));
}
}, [fetchData]);
return (
<>
{data && <h1>Your data is saved with Id: {data}</h1>}
<input
placeholder="Title of Post"
value={val}
onChange={(e) => setVal(e.target.value)}
/>
<button onClick={() => setFetch(true)}>Save Data</button>
);
};
export default App;在上述示例中，当发送带有数据的请求时，会拦截响应，如果状态代码为 201，则会记录消息“已成功发布”。
输出
这将产生以下结果。
更新于： 2021 年 3 月 18 日
11K+ 浏览量
广告