詳解Vue中使用Axios攔截器
需求是攔截前端的網(wǎng)絡(luò)請(qǐng)求和相應(yīng)。
廢話不多說(shuō),直接上干貨。

我用的是vue-cli3所以這個(gè)config文件是我自己創(chuàng)建的。
先介紹env.js
//根據(jù)不同的環(huán)境更改不同的baseUrl
let baseUrl = '';
//開發(fā)環(huán)境下
if (process.env.NODE_ENV == 'development') {
baseUrl = '';
} else if (process.env.NODE_ENV == 'production') {
baseUrl = '生產(chǎn)地址';
}
export {
baseUrl,//導(dǎo)出baseUrl
在這里我首先設(shè)置了開發(fā)環(huán)境和生產(chǎn)環(huán)境的地址,并向外拋出。
在看一下axios.js
import {
baseUrl, //引入baseUrl
} from "../config/env";
import axios from 'axios';
import qs from 'qs';
//引入vuex的js文件
import vuex from '../src/store/index';
// 創(chuàng)建 axios 實(shí)例
let service = axios.create({
baseUrl: baseUrl,//請(qǐng)求前綴
timeout: 20000, // 請(qǐng)求超時(shí)時(shí)間
crossDomain: true,//設(shè)置cross跨域
withCredentials: true//設(shè)置cross跨域 并設(shè)置訪問(wèn)權(quán)限 允許跨域攜帶cookie信息
})
// 設(shè)置 post 默認(rèn) Content-Type
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 添加請(qǐng)求攔截器
service.interceptors.request.use(
(config) => {
// console.log()
//下面的代碼是如何在攔截器中調(diào)用vuex管理狀態(tài)。
//我這里主要是做了一個(gè)蒙層的遮蓋
// vuex.$store.commit('OPEN_LOADING');
//判斷請(qǐng)求方式是否為POST,進(jìn)行轉(zhuǎn)換格式
config.method === 'post'
? config.data = qs.stringify({...config.data})
: config.params = {...config.params};
// 請(qǐng)求發(fā)送前進(jìn)行處理
return config
},
(error) => {
// 請(qǐng)求錯(cuò)誤處理
return Promise.reject(error)
}
)
// 添加響應(yīng)攔截器
service.interceptors.response.use(
(response) => {
let { data } = response;
return data
},
(error) => {
let info = {},
{ status, statusText, data } = error.response
if (!error.response) {
info = {
code: 5000,
msg: 'Network Error'
}
} else {
// 此處整理錯(cuò)誤信息格式
info = {
code: status,
data: data,
msg: statusText
}
}
}
)
/**
* 向外拋出service
*/
export default service
最后將這個(gè)axios.js文件引入main.js中,并將引入的axios掛載到Vue實(shí)例上就ok了。
完美!如有不對(duì)的地方還請(qǐng)各位大佬指點(diǎn),萬(wàn)分感謝。
踩過(guò)的坑:
怎么在axios攔截器中使用vuex,首先我們要引入vuex的js文件,然后就可以用了,就這么簡(jiǎn)單。
以上所述是小編給大家介紹的Vue使用Axios攔截器詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vue3+ts+Vuex中使用websocket協(xié)議方式
這篇文章主要介紹了vue3+ts+Vuex中使用websocket協(xié)議方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
vue.js源代碼core scedule.js學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了vue.js源代碼core scedule.js的學(xué)習(xí)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue3計(jì)算屬性computed和監(jiān)聽屬性watch區(qū)別解析
計(jì)算屬性適用于對(duì)已有的數(shù)據(jù)進(jìn)行計(jì)算,派生新的數(shù)據(jù),并在模板中使用;而監(jiān)聽屬性適用于監(jiān)聽數(shù)據(jù)的變化,并執(zhí)行一些特定的操作,根據(jù)具體的需求和場(chǎng)景,選擇適合的機(jī)制這篇文章主要介紹了Vue3計(jì)算屬性computed和監(jiān)聽屬性watch,需要的朋友可以參考下2024-02-02
Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余字?jǐn)?shù)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余文字?jǐn)?shù)量,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05

