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