1告组、在 vue3 的項(xiàng)目中全局配置 axios
2舟舒、在 vue2 的項(xiàng)目中全局配置 axios
-
需要在 main.js 入口文件中拉庶，通過 Vue 構(gòu)造函數(shù)的 prototype 原型對象全局配置 axios：
3、什么是攔截器
-
攔截器（英文：Interceptors）會在每次發(fā)起 ajax 請求和得到響應(yīng)的時候自動被觸發(fā)秃励。
4氏仗、配置請求攔截器
-
通過 axios.interceptors.request.use(成功的回調(diào), 失敗的回調(diào)) 可以配置請求攔截器。示例代碼如下：
注意：失敗的回調(diào)函數(shù)可以被省略夺鲜！
4.1 請求攔截器 – Token 認(rèn)證
4.2 請求攔截器 – 展示 Loading 效果
-
借助于 element ui 提供的 Loading 效果組件可以方便的實(shí)現(xiàn) Loading 效果的展示：
5皆尔、配置響應(yīng)攔截器
-
通過 axios.interceptors.response.use(成功的回調(diào), 失敗的回調(diào)) 可以配置響應(yīng)攔截器。示例代碼如下：
5.1 響應(yīng)攔截器 – 關(guān)閉 Loading 效果
-
調(diào)用 Loading 實(shí)例提供的 close() 方法即可關(guān)閉 Loading 效果币励，示例代碼如下：
6慷蠕、proxy 跨域代理
6.1 通過代理解決接口的跨域問題
-
通過 vue-cli 創(chuàng)建的項(xiàng)目在遇到接口跨域問題時，可以通過代理的方式來解決：
① 把 axios 的請求根路徑設(shè)置為vue 項(xiàng)目的運(yùn)行地址（接口請求不再跨域）
② vue 項(xiàng)目發(fā)現(xiàn)請求的接口不存在食呻，把請求轉(zhuǎn)交給proxy 代理
③ 代理把請求根路徑替換為 devServer.proxy 屬性的值流炕，發(fā)起真正的數(shù)據(jù)請求
④ 代理把請求到的數(shù)據(jù)，轉(zhuǎn)發(fā)給axios
6.2 在項(xiàng)目中配置 proxy 代理
-
步驟1搁进，在 main.js 入口文件中浪感，把 axios 的請求根路徑改造為當(dāng)前 web 項(xiàng)目的根路徑：
-
步驟2，在項(xiàng)目根目錄下創(chuàng)建 vue.config.js 的配置文件饼问，并聲明如下的配置：
-
注意：
① devServer.proxy 提供的代理功能，僅在開發(fā)調(diào)試階段生效
② 項(xiàng)目上線發(fā)布時揭斧，依舊需要 API 接口服務(wù)器開啟 CORS 跨域資源共享
