溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求是攔截前端的網絡請求和相應。
廢話不多說，直接上干貨。
我用的是vue-cli3所以這個config文件是我自己創建的。
先介紹env.js
//根據不同的環境更改不同的baseUrl
let baseUrl = '';
//開發環境下
if (process.env.NODE_ENV == 'development') {
baseUrl = '';
} else if (process.env.NODE_ENV == 'production') {
baseUrl = '生產地址';
}
export {
baseUrl,//導出baseUrl
在這里我首先設置了開發環境和生產環境的地址，并向外拋出。
在看一下axios.js
import {
baseUrl, //引入baseUrl
} from "../config/env";
import axios from 'axios';
import qs from 'qs';
//引入vuex的js文件
import vuex from '../src/store/index';
// 創建 axios 實例
let service = axios.create({
baseUrl: baseUrl,//請求前綴
timeout: 20000, // 請求超時時間
crossDomain: true,//設置cross跨域
withCredentials: true//設置cross跨域 并設置訪問權限 允許跨域攜帶cookie信息
})
// 設置 post 默認 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 添加請求攔截器
service.interceptors.request.use(
(config) => {
// console.log()
//下面的代碼是如何在攔截器中調用vuex管理狀態。
//我這里主要是做了一個蒙層的遮蓋
// vuex.$store.commit('OPEN_LOADING');
//判斷請求方式是否為POST，進行轉換格式
config.method === 'post'
? config.data = qs.stringify({...config.data})
: config.params = {...config.params};
// 請求發送前進行處理
return config
},
(error) => {
// 請求錯誤處理
return Promise.reject(error)
}
)
// 添加響應攔截器
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 {
// 此處整理錯誤信息格式
info = {
code: status,
data: data,
msg: statusText
}
}
}
)
/**
* 向外拋出service
*/
export default service
最后將這個axios.js文件引入main.js中，并將引入的axios掛載到Vue實例上就ok了。
完美！如有不對的地方還請各位大佬指點，萬分感謝。
踩過的坑：
怎么在axios攔截器中使用vuex，首先我們要引入vuex的js文件，然后就可以用了，就這么簡單。
以上所述是小編給大家介紹的Vue使用Axios攔截器詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
