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-native組件中NavigatorIOS和ListView結合使用的方法
這篇文章主要給大家介紹了關于react-native組件中NavigatorIOS和ListView結合使用的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-09-09
webpack在單頁面打包上應用廣泛，以create-react-app為首的腳手架眾多。這篇文章主要介紹了webpack4+react多頁面架構的實現，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
React關于antd table中select的設值更新問題
這篇文章主要介紹了React關于antd table中select的設值更新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了React useState的錯誤用法避坑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了React?SSR?之限流,React SSR 畢竟涉及到了服務端，有很多服務端特有的問題需要考慮，而限流就是其中之一，本文會通過一個簡單的案例來說明，為什么服務端需要進行限流，需要的朋友可以參考下2022-07-07
react Input組件Compositionstart和Compositionend事件
這篇文章主要為大家介紹了Compositionstart和Compositionend事件之于react組件庫Input組件的坑解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
在??web??開發(fā)的過程中,或多或少都會遇到大列表渲染的場景,為了解決大列表造成的渲染壓力,便出現了虛擬滾動技術,本文主要介紹虛擬滾動的三種思路,希望對大家有所幫助2024-04-04
React中的Portal允許開發(fā)者將組件渲染到DOM樹的不同位置,本文主要介紹了React中Portal的具體使用,具有一定的參考價值,感興趣的可以了解一下2025-02-02
這篇文章主要介紹了為什么說form元素是React的未來，本文會帶你聊聊React圍繞form的布局與發(fā)展，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當中去，本文給大家詳細講解，需要的朋友可以參考下2022-11-11