詳解Vue中使用Axios攔截器
需求是攔截前端的網(wǎng)絡(luò)請求和相應(yīng)。
廢話不多說,直接上干貨。
我用的是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,//請求前綴 timeout: 20000, // 請求超時(shí)時(shí)間 crossDomain: true,//設(shè)置cross跨域 withCredentials: true//設(shè)置cross跨域 并設(shè)置訪問權(quán)限 允許跨域攜帶cookie信息 }) // 設(shè)置 post 默認(rèn) Content-Type service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; // 添加請求攔截器 service.interceptors.request.use( (config) => { // console.log() //下面的代碼是如何在攔截器中調(diào)用vuex管理狀態(tài)。 //我這里主要是做了一個(gè)蒙層的遮蓋 // vuex.$store.commit('OPEN_LOADING'); //判斷請求方式是否為POST,進(jìn)行轉(zhuǎn)換格式 config.method === 'post' ? config.data = qs.stringify({...config.data}) : config.params = {...config.params}; // 請求發(fā)送前進(jìn)行處理 return config }, (error) => { // 請求錯(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了。
完美!如有不對的地方還請各位大佬指點(diǎn),萬分感謝。
踩過的坑:
怎么在axios攔截器中使用vuex,首先我們要引入vuex的js文件,然后就可以用了,就這么簡單。
以上所述是小編給大家介紹的Vue使用Axios攔截器詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)解決方法大全
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)解決方法的相關(guān)資料,文中通過圖文將解決的過程介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07vue.config.js配置proxy代理產(chǎn)生404錯(cuò)誤的原因及解決
這篇文章主要介紹了vue.config.js配置proxy代理產(chǎn)生404錯(cuò)誤的原因及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vue實(shí)現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能
這篇文章主要介紹了vue實(shí)現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08vue中v-for和v-if一起使用之使用compute的示例代碼
這篇文章主要介紹了vue中v-for和v-if一起使用之使用compute的相關(guān)知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05解決element-ui庫的el-row的gutter=10間距失效問題
這篇文章主要介紹了解決element-ui庫的el-row的gutter=10間距失效問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程
在微信小程序中,可以很簡單的分享一個(gè)頁面,比微信H5簡單多了,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程,需要的朋友可以參考下2023-02-02