vue項目中axios的封裝

承接另一篇文章 vue-cli4 項目框架的搭建 以及 路由的封裝、axios的封裝、公共函數js文件的封裝引用、vuex的基本用法、minins混入、css以及字體圖標和圖片的引入等 

這篇文章主要介紹對於 axios 的封裝。代碼結構如圖：

主要改動的文件是圖片中標紅框的部分。

其中 axios.js 的代碼為：

/** * 此文件主要創建 axios 實例，然后添加請求攔截器和響應攔截器 */ import axios from 'axios' import { Message } from 'element-ui'; //請求的服務器的地址
const basePath = 'http://10.10.15.210:28080'; //創建 axios 實例
const axiosInstance = axios.create({ baseURL: basePath, withCredentials: true,  //是否允許跨域
  timeout: 9000 }); //添加請求攔截器
axiosInstance.interceptors.request.use( config => { // 在發送請求之前做些什么（可以在這里給頭部添加token）
    // console.log("axios請求攔截器的config：",config);
    // if(sessionStorage.getItem("token")){
    // config.headers.access_token = sessionStorage.getItem("token")
    // }
    return config; }, error => { // 對請求錯誤做些什么
 console.log(error) return Promise.reject(error); } ); //添加響應攔截器
axiosInstance.interceptors.response.use( response => { console.log("axios響應攔截器的數據：",response); /** * 對響應數據判斷: * 如果成功返回數據，就通過return把數據返出去 * 如果請求不成功，就在攔截器這里統一處理（組件的代碼就不用關注錯誤的情況了） */
    if(response.status==200){ return response.data; // return response;
      // return 123;
    }else{ handleErrorData(response.data); } return response; }, error => { // 對響應錯誤做點什么
    // console.log("axios響應攔截器的錯誤數據：",error);
    // Message.error(error.message);
    return Promise.reject(error); } ); //對錯誤信息的處理函數
function handleErrorData(errMes){ if(errMes.message){ Message.error(errMes.message); }else{ switch(errMes.code){ case 401 : Message.error("未授權，請重新登錄!"); break; case 403 : Message.error("拒絕訪問"); break; case 404 : Message.error("很抱歉，資源未找到!"); break; case 500 : Message.error("服務器錯誤!"); break; case 504 : Message.error("網絡超時!"); break; default : Message.error("服務正在聯調中，請稍后!"); break; } } } export {axiosInstance}

 代碼解析：

1. 服務器地址的定義 basePath 的值依自己的項目而定，這里的 http://10.10.15.210:28080 只是示例。
2. 首先創建 axios 實例，然后在 axios 實例上添加請求攔截器 和 響應攔截器。
3. 請求攔截器的成功函數里面我們一般的用途都是給請求頭部添加 token。
4. 響應攔截器請求成功函數里的判斷條件 response.status==200 依自己的項目中后端返回的數據而定，如果成功，則 return response.data ，這里返回的 response.data 就是我們項目中每個 .vue 文件中請求接口的返回值，在這里做了統一的封裝，如果把 return response.data 改為 return 123 ，那么項目中所有的 .vue 文件中跟后端交互的數據返回的都是統一的數值 123 。
5. 響應攔截器請求成功函數里面的的判斷條件 response.status==200 如果不成立，則通過函數 handleErrorData 對錯誤消息統一處理，這樣我們在項目中每個 .vue 文件中所有跟后端交互的時候，我們只關注請求成功時的數據處理即可，不用理會請求錯誤時的處理邏輯，因為在此處的響應攔截器里面統一處理了。至於 函數 handleErrorData 中的判斷條件等等，依據自己的項目實際情況而定，可對應修改代碼。
6. 最后返回創建的 axios 實例 axiosInstance。

注意：axios.js 中的 import { Message } from 'element-ui' ，項目中，以 .vue 結尾的文件，我們可以直接用 this.$message.error("錯誤消息") 的語法，是因為我們用框架elementui的時候，在 main.js 中定義的有，vue文件中的 this 指的是vue對象。而 js 文件中我們就不能用 this.$message.error("錯誤消息") 的語法，因為在js文件中，this 指的是 window 對象，所以我們需要通過 import { Message } from 'element-ui' 語法引入。 

其中 request.js 中的代碼為：

/** * 此文件主要封裝 axios 的get、post、delete等方法 * （后續還可以添加文件的上傳、下載、文件的導出等等） */ import { axiosInstance as axios } from "./axios.js"

//get
export function axiosGet(url,parameter={}) { return axios({  //這里的 axios 就是從 axios.js 中引入的 axiosInstance
 url: url, method: 'get', params: parameter }) } //post
export function axiosPost(url,parameter={}) { return axios({ url: url, method:'post' , data: parameter }) } //delete
export function axiosDelete(url,parameter={}) { return axios({ url: url, method: 'delete', params: parameter }) }

代碼解析：

1.  從 axios.js 中引入 axios 的實例 axiosInstance，將其重命名為 axios
2. 通過 axios API 定義get、post、delete 等方法，具體用法參見 axios 官網 API用法 
3. 后續我們也可以在這個文件中拓展其他與服務器交互的方法，如文件的上傳、下載、導出等等。

 其中 main.js 中的代碼：

import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store'

//elementui
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI, {size: 'small'}); //請求方法
import {axiosGet,axiosPost,axiosDelete} from "@/serversApi/request.js" Vue.prototype.$axiosGet = axiosGet; Vue.prototype.$axiosPost = axiosPost; Vue.prototype.$axiosDelete = axiosDelete; Vue.config.productionTip = false

new Vue({ router, store, render: h => h(App) }).$mount('#app')

代碼解析：我們把請求方法定義到 vue 的原型 prototype 上，這樣我們在項目中的 .vue 文件中，跟服務器交互的時候，就可以直接用 this.$axiosGet( ) ，這樣就方便多了。 

總結：主要思路是創建 axios 的實例 axiosInstance，在實例 axiosInstance 上添加請求攔截器和響應攔截器，然后在 axiosInstance 上添加 get 、post等方法。最后在 main.js 中引入，定義到 vue 的原型 prototype 上，方便在 vue 的組件中運用。 

訪問本地的json文件

axios 封裝成功之后，測試一下訪問本地的json文件，看是否能夠訪問成功。

在vue-cli2.x的版本中，我們習慣在根目錄下的 static 文件夾下創建json文件，因為 static目錄是vue-cli向外暴露的靜態文件夾，全部靜態數據都應該放到static目錄中！！我們一般會在 static 下新建一個data文件夾，里面放json文件。

但是vue-cli3.x的版本中，沒有static文件夾了，那咋辦？有人說我創一個static文件夾在下面繼續寫json文件不就行了。但結果會報錯，請求404找不到文件。因為 vue-cli3.x 版本，已經默認將靜態文件改存在 public 文件夾下了。此時 public 才是 vue-cli 向外暴露的靜態文件夾。所以我們在public下面創建一個json文件夾，里面存放 json 數據的文件。

 此時，我們在文件中就可以測試訪問數據了：

let res = await this.$axiosGet('/json/test.json'); console.log(res)

這里可能會有朋友疑問了，誒？請求路徑不應該是'public/json/xx.json'嗎？注意了如果路徑這樣寫反而會報錯404找不到

轉發api路徑代理設置

開發情況下我們像上面這樣改寫路徑其實是不合理的，默認我們將相對路徑寫為'/api/xxx'，那如何將/api指向實際的數據文件路徑，實現轉發？舊版本下我們會在vue.config.js下配置proxy屬性，但新版本這個js文件已經不在目錄下了，我們需要手動創建。

//在根目錄下創建vue.config.js,如下配置：
module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', //路徑指向本地主機地址及端口號。這里別忘了加http
        ws: true, changeOrigin: true, pathRewrite:{ '^/api': '/json' //路徑轉發代理。這里意味着用"/api"來代替"/json"
 } } } } }

將axios請求路徑更改為/api：

let res = await this.$axiosGet('/api/test.json'); console.log(res)

做完以上步驟和避開雷區，已經可以成功在vuecli3、4版本項目上請求到本地json文件的數據了。等到和后台對接時，只要和后台工作人員確認好數據所在的主機地址端口號，更改vue.config.js文件配置即可。

 

有關axios的封裝也可參考另一篇： vue項目中axios的封裝（簡單版）

更多有關axios的細節請移步另一篇文章：https://www.cnblogs.com/smile-fanyin/p/14768579.html