ReactJS應(yīng)用程序中設(shè)置Axios攔截器方法demo
簡(jiǎn)介
在這篇文章中，我們將學(xué)習(xí)如何干凈地設(shè)置Axios以實(shí)現(xiàn)代碼的可讀性和可重用性。我們之前已經(jīng)學(xué)習(xí)了如何在我們的reactJS應(yīng)用程序中設(shè)置Axios 。因此，不要浪費(fèi)任何時(shí)間，讓我們直接進(jìn)入它。
當(dāng)我們學(xué)會(huì)了如何發(fā)送HTTPS請(qǐng)求和接收響應(yīng)時(shí)，我們與服務(wù)器進(jìn)行數(shù)據(jù)通信，每次都必須使用響應(yīng)中的解構(gòu)數(shù)據(jù)。如果我告訴你Axios為你提供了一個(gè)內(nèi)置的機(jī)制，以更簡(jiǎn)潔的方式處理所有這些麻煩，你會(huì)怎樣？
Axios中的攔截器
有了Axios攔截器， 你現(xiàn)在可以在請(qǐng)求和響應(yīng)被then()或catch()塊處理之前攔截和鉤住它們。讓我們看看它們的作用，在config目錄下制作https.js，就像這樣
配置目錄下的HTTPS文件
現(xiàn)在編寫(xiě)代碼，在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實(shí)例創(chuàng)建了攔截器，處理請(qǐng)求和響應(yīng)，這使得我們的代碼可以重復(fù)使用，并且可讀。
攔截器還允許我們?cè)谡?qǐ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);
}
);
我們已經(jīng)知道了如何在我們的reactJS應(yīng)用中使用Axios，在這一章中介紹了如何通過(guò)使用攔截器來(lái)充分利用Axios的優(yōu)勢(shì)，更多關(guān)于ReactJS設(shè)置Axios攔截器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
react-native組件中NavigatorIOS和ListView結(jié)合使用的方法
這篇文章主要給大家介紹了關(guān)于react-native組件中NavigatorIOS和ListView結(jié)合使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-09-09
webpack4+react多頁(yè)面架構(gòu)的實(shí)現(xiàn)
webpack在單頁(yè)面打包上應(yīng)用廣泛，以create-react-app為首的腳手架眾多。這篇文章主要介紹了webpack4+react多頁(yè)面架構(gòu)的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
React關(guān)于antd table中select的設(shè)值更新問(wèn)題
這篇文章主要介紹了React關(guān)于antd table中select的設(shè)值更新問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了React useState的錯(cuò)誤用法避坑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了React?SSR?之限流,React SSR 畢竟涉及到了服務(wù)端，有很多服務(wù)端特有的問(wèn)題需要考慮，而限流就是其中之一，本文會(huì)通過(guò)一個(gè)簡(jiǎn)單的案例來(lái)說(shuō)明，為什么服務(wù)端需要進(jìn)行限流，需要的朋友可以參考下2022-07-07
react Input組件Compositionstart和Compositionend事件
這篇文章主要為大家介紹了Compositionstart和Compositionend事件之于react組件庫(kù)Input組件的坑解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React實(shí)現(xiàn)虛擬滾動(dòng)的三種思路詳解
在??web??開(kāi)發(fā)的過(guò)程中,或多或少都會(huì)遇到大列表渲染的場(chǎng)景,為了解決大列表造成的渲染壓力,便出現(xiàn)了虛擬滾動(dòng)技術(shù),本文主要介紹虛擬滾動(dòng)的三種思路,希望對(duì)大家有所幫助2024-04-04
React中的Portal允許開(kāi)發(fā)者將組件渲染到DOM樹(shù)的不同位置,本文主要介紹了React中Portal的具體使用,具有一定的參考價(jià)值,感興趣的可以了解一下2025-02-02
為什么說(shuō)form元素是React的未來(lái)
這篇文章主要介紹了為什么說(shuō)form元素是React的未來(lái)，本文會(huì)帶你聊聊React圍繞form的布局與發(fā)展，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫(xiě)的redux代碼，融入到react當(dāng)中去，本文給大家詳細(xì)講解，需要的朋友可以參考下2022-11-11