ReactJS應用程序中設置Axios攔截器方法demo
更新時間：2022年12月13日 16:16:25 作者：Jovie
這篇文章主要為大家介紹了ReactJS應用程序中設置Axios攔截器方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
簡介
在這篇文章中，我們將學習如何干凈地設置Axios以實現代碼的可讀性和可重用性。我們之前已經學習了如何在我們的reactJS應用程序中設置Axios 。因此，不要浪費任何時間，讓我們直接進入它。
當我們學會了如何發(fā)送HTTPS請求和接收響應時，我們與服務器進行數據通信，每次都必須使用響應中的解構數據。如果我告訴你Axios為你提供了一個內置的機制，以更簡潔的方式處理所有這些麻煩，你會怎樣？
Axios中的攔截器
有了Axios攔截器， 你現在可以在請求和響應被then()或catch()塊處理之前攔截和鉤住它們。讓我們看看它們的作用，在config目錄下制作https.js，就像這樣
配置目錄下的HTTPS文件
現在編寫代碼，在Axios中使用攔截器
import axios from "axios";
export const axiosInstance = axios.create({
baseURL: "https://swapi.dev/api/",
});
axiosInstance.interceptors.request.use(
function (config) {
// Do something before request is sent
return config;
},
function (error) {
// Do something with request error
return Promise.reject(error);
}
);
axiosInstance.interceptors.response.use(
function (response) {
return response;
},
function (error) {
return Promise.reject(error);
}
);
在這里，我們?yōu)锳xios實例創(chuàng)建了攔截器，處理請求和響應，這使得我們的代碼可以重復使用，并且可讀。
攔截器還允許我們在請求中添加或定制我們的頭信息，方法如下
axiosInstance.interceptors.request.use(
async (config) => {
const token = # Your token goes over here;
if (token) {
config.headers.accessToken = token;
}
return config;
},
function (error) {
return Promise.reject(error);
}
);
我們已經知道了如何在我們的reactJS應用中使用Axios，在這一章中介紹了如何通過使用攔截器來充分利用Axios的優(yōu)勢，更多關于ReactJS設置Axios攔截器的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家介紹了react?Scheduler?實現示例教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了React Hook的使用示例，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下2021-04-04
electron其實是一個桌面應用程序，不是一個標準的前端web程序，所有沒有什么請求的發(fā)生，控制臺network看不到請求，而是只能通過console.log去打印查看，而且通信協(xié)議使用的不是http而是gRPC協(xié)議，這篇文章主要介紹了Electron+React如何進行通信,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了React中使用react-file-viewer問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
react是一個簡單的javascript UI庫，用于構建高效、快速的用戶界面。它是一個輕量級庫，因此很受歡迎。接下來通過本文給大家分享從 html 實現一個 react的方法，一起看看吧2021-07-07
useEffect()是react中的hook函數,作用是用于創(chuàng)建由渲染本身引起的操作,介紹了依賴項數組不同的區(qū)別,對react useEffect()使用相關知識感興趣的朋友一起看看吧2024-05-05
圖文示例講解useState與useReducer性能區(qū)別
這篇文章主要為大家介紹了useState與useReducer性能區(qū)別圖文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
react-router-dom v6版本實現Tabs路由緩存切換功能
今天有人問我怎么實現React-Router-dom類似標簽頁緩存,很久以前用的是react-router v5那個比較容易實現,v6變化挺大,但了解react的機制和react-router的機制就容易了,本文介紹react-router-dom v6版本實現Tabs路由緩存切換,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了React?hooks組件通信,在開發(fā)中組件通信是React中的一個重要的知識點，本文通過實例代碼給大家講解react hooks中常用的父子、跨組件通信的方法，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了如何使用React Hooks請求數據并渲染，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10