Vue3中axios請(qǐng)求封裝、請(qǐng)求攔截與相應(yīng)攔截詳解
前言
對(duì)于三者放在Service.js中封裝,方便使用
axios.create
的作用是創(chuàng)建一個(gè)新的 axios
實(shí)例,該實(shí)例可以具有自定義配置。通過(guò)使用 axios.create
,您可以為任何 API 生成一個(gè)客戶(hù)端,并在使用同一客戶(hù)端的任何調(diào)用中重復(fù)使用相同的配置。這使得在應(yīng)用程序中使用多個(gè) API 時(shí)更加方便,因?yàn)槟梢詾槊總€(gè) API 創(chuàng)建一個(gè)單獨(dú)的實(shí)例,并在每個(gè)實(shí)例中設(shè)置不同的配置。
axios.create
方法接受一個(gè)配置對(duì)象作為參數(shù),該對(duì)象包含以下屬性:
- baseURL:用于所有請(qǐng)求的基本 URL。
- headers:要發(fā)送的自定義 headers。
- timeout:指定請(qǐng)求超時(shí)之前的毫秒數(shù)。
- withCredentials:指示是否應(yīng)該使用跨站點(diǎn)訪問(wèn)控制(CORS)憑據(jù)。
- xsrfCookieName:用作 xsrf 令牌值的cookie的名稱(chēng)。
- xsrfHeaderName:包含 xsrf 令牌值的 HTTP 頭的名稱(chēng)。
例如,以下代碼創(chuàng)建了一個(gè)新的 axios 實(shí)例,并將其配置為使用 /api/
作為基本 URL:
const instance = axios.create({ baseURL: '/api/' });
axios請(qǐng)求封裝
// 用create創(chuàng)建axios實(shí)例 const Service = axios.create({ timeout: 3000, baseURL: 'http://127.0.0.1:8888/api/private/v1/', headers: { 'Content-type': 'application/json;charset=utf-8' } }) // get 數(shù)據(jù)請(qǐng)求封裝 export const get = config => { return Service({ ...config, method: 'get', data: config.data, }) } // post 數(shù)據(jù)請(qǐng)求封裝 export const post = config => { return Service({ ...config, method: 'post', data: config.data, }) }
請(qǐng)求攔截和響應(yīng)攔截
在 Vue3 中,可以使用 Axios 庫(kù)來(lái)進(jìn)行 HTTP 請(qǐng)求。Axios 庫(kù)提供了請(qǐng)求攔截器和響應(yīng)攔截器,以便在請(qǐng)求發(fā)送和響應(yīng)返回時(shí)執(zhí)行一些操作。
請(qǐng)求攔截器可以用于在請(qǐng)求發(fā)送前執(zhí)行一些操作,例如添加 token、設(shè)置請(qǐng)求頭等。響應(yīng)攔截器可以用于在響應(yīng)返回后執(zhí)行一些操作,例如處理錯(cuò)誤信息、剝離無(wú)效數(shù)據(jù)等。
let loadingObj = null; // 請(qǐng)求攔截,增加loading,對(duì)請(qǐng)求統(tǒng)一處理 Service.interceptors.request.use((config) => { loadingObj = ElLoading.service({ lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)', }) return config; }) // 相應(yīng)攔截,對(duì)返回值做同意處理 Service.interceptors.response.use(response => { loadingObj.close(); const data = response.data; if (!data.data) { ElMessage.error(data.meta.msg || '服務(wù)器錯(cuò)誤') } else { ElMessage({ message: '登錄成功', type: 'success', duration: 1500 }) } return response.data; }, error => { loadingObj.close(); ElMessage({ message: '服務(wù)器錯(cuò)誤', type: 'error', duration: 2000 }) })
接口的請(qǐng)求
import { get, post } from './service' // 登錄數(shù)據(jù)請(qǐng)求 export const loginAPI = data => { return post({ url: '/login', data }) }
總結(jié)
到此這篇關(guān)于Vue3中axios請(qǐng)求封裝、請(qǐng)求攔截與相應(yīng)攔截的文章就介紹到這了,更多相關(guān)Vue3 axios請(qǐng)求封裝、攔截內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue如何點(diǎn)擊多個(gè)tab標(biāo)簽打開(kāi)關(guān)閉多個(gè)頁(yè)面
這篇文章主要介紹了vue如何點(diǎn)擊多個(gè)tab標(biāo)簽打開(kāi)關(guān)閉多個(gè)頁(yè)面,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09uni-app中使用ECharts配置四種不同的圖表(示例詳解)
在uni-app中集成ECharts可以為我們的應(yīng)用提供強(qiáng)大的圖表功能,我們?cè)敿?xì)說(shuō)一下如何在uni-app中使用ECharts,并配置四種不同的圖表,感興趣的朋友跟隨小編一起看看吧2024-01-01詳解Vue中雙向綁定原理及簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue中雙向綁定原理及簡(jiǎn)單實(shí)現(xiàn),文中的示例代碼講解詳細(xì),對(duì)我們深入了解Vue有一定的幫助,需要的可以參考一下2023-05-05vue3+ts數(shù)組去重方及reactive/ref響應(yīng)式顯示流程分析
這篇文章主要介紹了vue3+ts數(shù)組去重方法-reactive/ref響應(yīng)式顯示,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04VUE3刷新頁(yè)面報(bào)錯(cuò)問(wèn)題解決:Uncaught?SyntaxError:Unexpected?token?&apo
這篇文章主要介紹了VUE3刷新頁(yè)面報(bào)錯(cuò):Uncaught?SyntaxError:?Unexpected?token?‘<‘,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03vue中element-ui組件默認(rèn)css樣式修改的四種方式
在前端項(xiàng)目中會(huì)運(yùn)用各種組件,有時(shí)組件的默認(rèn)樣式并不是你項(xiàng)目中所需要的,你需要更改樣式,下面這篇文章主要給大家介紹了關(guān)于vue中element-ui組件默認(rèn)css樣式修改的四種方式,需要的朋友可以參考下2021-10-10詳解如何在Vue2中實(shí)現(xiàn)組件props雙向綁定
在Vue2中組件的props的數(shù)據(jù)流動(dòng)改為了只能單向流動(dòng),如何在Vue2中實(shí)現(xiàn)組件props雙向綁定 ,一起來(lái)跟小編看看。2017-03-03