[toc] ### 1. 安裝axios ### 2. 在utils文件夾內創建request.js文件 ### 3. 引入axios ### 4. 創建axios實例 ### 5. 創建請求和響應攔截器 ### 6. 導出axios實例 ### 7. 在攔截器中通過config.headers將token攜帶給后臺 ### 8. 實現loading加載 ### 9. 實現token過期處理 ``` //設置axios的一些配置 import axios from "axios"; import { Loading } from 'element-ui'; import router from "../router/index" //封裝loading加載 const loading = { loadingInstance : null, open(){ if(this.loadingInstance === null){ this.loadingInstance = Loading.service({ target : ".main", text : "正在加載中", background : "rgba(0,0,0,0.5)" }); } }, close(){ if(this.loadingInstance !== null){ this.loadingInstance.close(); } this.loadingInstance = null; } } //創建axios實例,在axios實例里面可以自定義一些請求的選項 const request = axios.create({ //設置公共路徑 baseURL : process.env.VUE_APP_BASE_API , //設置請求的超時時間 timeout : 5000 }); // 添加請求攔截器 request.interceptors.request.use(function (config) { //進行loading加載 loading.open(); const token = localStorage.getItem("yy_token") ? localStorage.getItem("yy_token") : ""; //發送token config.headers.Authorization ="Bearer " + token; console.log("請求攔截") // 在發送請求之前做些什么 return config; }, function (error) { //關閉loading加載 loading.close(); // 對請求錯誤做些什么 return Promise.reject(error); }); // 添加響應攔截器 request.interceptors.response.use(function (response) { //關閉loading加載 loading.close(); if(response.data.code == "202"){ localStorage.removeItem("yy_token"); localStorage.removeItem("jy_info"); router.push({path : "/login"}) } console.log("響應攔截") // 對響應數據做點什么 return response; }, function (error) { //關閉loading加載 loading.close(); // 對響應錯誤做點什么 return Promise.reject(error); }); //導出axios實例對象 export default request; ```