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+ 浏览量

开启您的职业生涯

通过完成课程获得认证

立即开始
广告