資料結構
網路
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+ 瀏覽量
廣告