需求是攔截前端的網絡請求和相應。
廢話不多說，直接上干貨。
我用的是vue-cli3所以這個config文件是我自己創建的。
先介紹env.js
//根據不同的環境更改不同的baseUrllet 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-Typeservice.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攔截器詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
