一、axios的封裝

在vue項目中，和后臺交互獲取數據這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運行在瀏覽器端和node.js中。他有很多優(yōu)秀的特性，例如攔截請求和響應、取消請求、轉換json、客戶端防御XSRF等。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護，直接推薦我們使用axios庫。如果還對axios不了解的，可以移步axios文檔。

安裝

npm install axios; // 安裝axios

引入

一般我會在項目的src目錄中，新建一個request文件夾，然后在里面新建一個http.js和一個api.js文件。http.js文件用來封裝我們的axios，api.js用來統(tǒng)一管理我們的接口。

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模塊，用來序列化post類型的數據，后面會提到
// vant的toast提示框組件，大家可根據自己的ui組件更改。
import { Toast } from 'vant'; 

環(huán)境的切換

我們的項目環(huán)境可能有開發(fā)環(huán)境、測試環(huán)境和生產環(huán)境。我們通過node的環(huán)境變量來匹配我們的默認的接口url前綴。axios.defaults.baseURL可以設置axios的默認請求地址就不多說了。

// 環(huán)境的切換
if (process.env.NODE_ENV == 'development') {    axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    axios.defaults.baseURL = 'https://www.production.com';
}

設置請求超時

通過axios.defaults.timeout設置默認的請求超時時間。例如超過了10s，就會告知用戶當前請求超時，請刷新等。

axios.defaults.timeout = 10000;

post請求頭的設置

post請求的時候，我們需要加上一個請求頭，所以可以在這里進行一個默認的設置，即設置post的請求頭為application/x-www-form-urlencoded;charset=UTF-8

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

• 請求攔截

我們在發(fā)送請求前可以進行一個請求的攔截，為什么要攔截呢，我們攔截請求是用來做什么的呢？比如，有些請求是需要用戶登錄之后才能訪問的，或者post請求的時候，我們需要序列化我們提交的數據。這時候，我們可以在請求被發(fā)送之前進行一個攔截，從而進行我們想要的操作。

請求攔截

// 先導入vuex,因為我們要使用到里面的狀態(tài)對象
// vuex的路徑根據自己的路徑去寫
import store from '@/store/index';// 請求攔截器axios.interceptors.request.use(    config => {        // 每次發(fā)送請求之前判斷vuex中是否存在token        // 如果存在，則統(tǒng)一在http請求的header都加上token，這樣后臺根據token判斷你的登錄情況// 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態(tài)進行判斷 const token = store.state.token;        token && (config.headers.Authorization = token);        return config;    },    error => {        return Promise.error(error);    
})

這里說一下token，一般是在登錄完成之后，將用戶的token通過localStorage或者cookie存在本地，然后用戶每次在進入頁面的時候（即在main.js中），會首先從本地存儲中讀取token，如果token存在說明用戶已經登陸過，則更新vuex中的token狀態(tài)。然后，在每次請求接口的時候，都會在請求的header中攜帶token，后臺人員就可以根據你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。這時候或許有些小伙伴會有疑問了，就是每個請求都攜帶token，那么要是一個頁面不需要用戶登錄就可以訪問的怎么辦呢？其實，你前端的請求可以攜帶token，但是后臺可以選擇不接收啊！

響應的攔截

// 響應攔截器
axios.interceptors.response.use(    response => {   // 如果返回的狀態(tài)碼為200，說明接口請求成功，可以正常拿到數據     // 否則的話拋出錯誤if (response.status === 200) {            return Promise.resolve(response);        } else {            return Promise.reject(response);        }    },    // 服務器狀態(tài)碼不是2開頭的的情況// 這里可以跟你們的后臺開發(fā)人員協(xié)商好統(tǒng)一的錯誤狀態(tài)碼    // 然后根據返回的狀態(tài)碼進行一些操作，例如登錄過期提示，錯誤提示等等// 下面列舉幾個常見的操作，其他需求可自行擴展error => {            if (error.response.status) {            switch (error.response.status) {                // 401: 未登錄// 未登錄則跳轉登錄頁面，并攜帶當前頁面的路徑// 在登錄成功后返回當前頁面，這一步需要在登錄頁操作。                case 401:                    router.replace({                        path: '/login',                        query: { redirect: router.currentRoute.fullPath }});break;// 403 token過期// 登錄過期對用戶進行提示// 清除本地token和清空vuex中token對象// 跳轉登錄頁面                case 403:Toast({message: '登錄過期，請重新登錄',duration: 1000,forbidClick: true});// 清除tokenlocalStorage.removeItem('token');store.commit('loginSuccess', null);// 跳轉登錄頁面，并將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉需要訪問的頁面 setTimeout(() => {                        router.replace({                            path: '/login',                            query: { redirect: router.currentRoute.fullPath }                        });                    }, 1000);                    break; // 404請求不存在case 404:Toast({message: '網絡請求不存在',duration: 1500,forbidClick: true});break;// 其他錯誤，直接拋出錯誤提示default:Toast({message: error.response.data.message,duration: 1500,forbidClick: true});}return Promise.reject(error.response);}}    
});

響應攔截器很好理解，就是返回給我們的數據，我們在拿到之前可以對他進行一些處理。例如上面的思想：如果后臺返回的狀態(tài)碼是200，則正常返回數據，否則的根據錯誤的狀態(tài)碼類型進行一些我們需要的錯誤，其實這里主要就是進行了錯誤的統(tǒng)一處理和沒登錄或登錄過期后調整登錄頁的一個操作。

要注意的是，上面的Toast()方法，是我引入的vant庫中的toast輕提示組件，你根據你的ui庫，對應使用你的一個提示組件。

封裝get方法和post方法

我們常用的ajax請求方法有get、post、put等方法，相信小伙伴都不會陌生。axios對應的也有很多類似的方法，不清楚的可以看下文檔。但是為了簡化我們的代碼，我們還是要對其進行一個簡單的封裝。下面我們主要封裝兩個方法：get和post。

get方法：我們通過定義一個get函數，get函數有兩個參數，第一個參數表示我們要請求的url地址，第二個參數是我們要攜帶的請求參數。get函數返回一個promise對象，當axios其請求成功時resolve服務器返回 值，請求失敗時reject錯誤值。最后通過export拋出get函數。

/*** get方法，對應get請求* @param {String} url [請求的url地址]* @param {Object} params [請求時攜帶的參數]*/
export function get(url, params){    return new Promise((resolve, reject) =>{        axios.get(url, {            params: params        }).then(res => {resolve(res.data);}).catch(err =>{reject(err.data)        })    
});}

**post方法：**原理同get基本一樣，但是要注意的是，post方法必須要使用對提交從參數對象進行序列化的操作，所以這里我們通過node的qs模塊來序列化我們的參數。這個很重要，如果沒有序列化操作，后臺是拿不到你提交的數據的。這就是文章開頭我們import QS from 'qs';的原因。如果不明白序列化是什么意思的，就百度一下吧，答案一大堆。

/** * post方法，對應post請求 * @param {String} url [請求的url地址] * @param {Object} params [請求時攜帶的參數] */
export function post(url, params) {return new Promise((resolve, reject) => {axios.post(url, QS.stringify(params)).then(res => {resolve(res.data);}).catch(err =>{reject(err.data)})});
}

這里有個小細節(jié)說下，axios.get()方法和axios.post()在提交數據時參數的書寫方式還是有區(qū)別的。區(qū)別就是，get的第二個參數是一個{}，然后這個對象的params屬性值是一個參數對象的。而post的第二個參數就是一個參數對象。兩者略微的區(qū)別要留意哦！

axios的封裝基本就完成了，下面再簡單說下api的統(tǒng)一管理。

整齊的api就像電路板一樣，即使再復雜也能很清晰整個線路。上面說了，我們會新建一個api.js,然后在這個文件中存放我們所有的api接口。

• 首先我們在api.js中引入我們封裝的get和post方法

/**   * api接口統(tǒng)一管理*/
import { get, post } from './http'

現在，例如我們有這樣一個接口，是一個post請求：

http://www.baiodu.com/api/v1/users/my_address/address_edit_before

我們可以在api.js中這樣封裝：

export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);

我們定義了一個apiAddress方法，這個方法有一個參數p，p是我們請求接口時攜帶的參數對象。而后調用了我們封裝的post方法，post方法的第一個參數是我們的接口地址，第二個參數是apiAddress的p參數，即請求接口時攜帶的參數對象。最后通過export導出apiAddress。

然后在我們的頁面中可以這樣調用我們的api接口：

import { apiAddress } from '@/request/api';// 導入我們的api接口
export default {        name: 'Address',    created () {this.onLoad();},methods: {            // 獲取數據            onLoad() {// 調用api接口，并且提供了兩個參數                apiAddress({                    type: 0,                    sort: 1                }).then(res => {// 獲取數據成功后的其他操作………………                })            }        }
}

其他的api接口，就在pai.js中繼續(xù)往下面擴展就可以了。友情提示，為每個接口寫好注釋哦！！！

api接口管理的一個好處就是，我們把api統(tǒng)一集中起來，如果后期需要修改接口，我們就直接在api.js中找到對應的修改就好了，而不用去每一個頁面查找我們的接口然后再修改會很麻煩。關鍵是，萬一修改的量比較大，就規(guī)格gg了。還有就是如果直接在我們的業(yè)務代碼修改接口，一不小心還容易動到我們的業(yè)務代碼造成不必要的麻煩。

好了，最后把完成的axios封裝代碼奉上。

/**axios封裝* 請求攔截、相應攔截、錯誤統(tǒng)一處理*/
import axios from 'axios';import QS from 'qs';
import { Toast } from 'vant';
import store from '../store/index'// 環(huán)境的切換
if (process.env.NODE_ENV == 'development') {    axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'debug') {    axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {    axios.defaults.baseURL = 'http://api.123dailu.com/';
}// 請求超時時間
axios.defaults.timeout = 10000;// post請求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';// 請求攔截器
axios.interceptors.request.use(    config => {// 每次發(fā)送請求之前判斷是否存在token，如果存在，則統(tǒng)一在http請求的header都加上token，不用每次請求都手動添加了// 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態(tài)進行判斷const token = store.state.token;        token && (config.headers.Authorization = token);        return config;    },    error => {        return Promise.error(error);    })// 響應攔截器
axios.interceptors.response.use(    response => {        if (response.status === 200) {            return Promise.resolve(response);        } else {            return Promise.reject(response);        }    },// 服務器狀態(tài)碼不是200的情況    error => {        if (error.response.status) {            switch (error.response.status) {                // 401: 未登錄                // 未登錄則跳轉登錄頁面，并攜帶當前頁面的路徑                // 在登錄成功后返回當前頁面，這一步需要在登錄頁操作。                case 401:                    router.replace({                        path: '/login',                        query: { redirect: router.currentRoute.fullPath } });break;// 403 token過期                // 登錄過期對用戶進行提示                // 清除本地token和清空vuex中token對象                // 跳轉登錄頁面                case 403:                     Toast({                        message: '登錄過期，請重新登錄',                        duration: 1000,                        forbidClick: true                    });                    // 清除token                    localStorage.removeItem('token');                    store.commit('loginSuccess', null);                    // 跳轉登錄頁面，并將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉需要訪問的頁面setTimeout(() => {                        router.replace({                            path: '/login',                            query: { redirect: router.currentRoute.fullPath }                        });                    }, 1000);                    break; // 404請求不存在                case 404:                    Toast({                        message: '網絡請求不存在',                        duration: 1500,                        forbidClick: true                    });                    break;                // 其他錯誤，直接拋出錯誤提示                default:                    Toast({                        message: error.response.data.message,                        duration: 1500,                        forbidClick: true                    });            }            return Promise.reject(error.response);        }       }
);
/** * get方法，對應get請求 * @param {String} url [請求的url地址] * @param {Object} params [請求時攜帶的參數] */
export function get(url, params){    return new Promise((resolve, reject) =>{        axios.get(url, {            params: params        })        .then(res => {            resolve(res.data);        })        .catch(err => {            reject(err.data)        })    });
}
/** * post方法，對應post請求 * @param {String} url [請求的url地址] * @param {Object} params [請求時攜帶的參數] */
export function post(url, params) {    return new Promise((resolve, reject) => {         axios.post(url, QS.stringify(params))        .then(res => {            resolve(res.data);        })        .catch(err => {            reject(err.data)        })    });
}

這個axios和之前的大同小異，做了如下幾點改變：

1.去掉了之前get和post方法的封裝，通過創(chuàng)建一個axios實例然后export default方法導出，這樣使用起來更靈活一些。

2.去掉了通過環(huán)境變量控制baseUrl的值?？紤]到接口會有多個不同域名的情況，所以準備通過js變量來控制接口域名。這點具體在api里會介紹。

3.增加了請求超時，即斷網狀態(tài)的處理。說下思路，當斷網時，通過更新vuex中network的狀態(tài)來控制斷網提示組件的顯示隱藏。斷網提示一般會有重新加載數據的操作，這步會在后面對應的地方介紹。

4.公用函數進行抽出，簡化代碼，盡量保證單一職責原則。

下面說下api這塊，考慮到一下需求：

1.更加模塊化

2.更方便多人開發(fā)，有效減少解決命名沖突

3.處理接口域名有多個情況

這里這里呢新建了一個api文件夾，里面有一個index.js和一個base.js，以及多個根據模塊劃分的接口js文件。index.js是一個api的出口，base.js管理接口域名，其他js則用來管理各個模塊的接口。

先放index.js代碼：

/** * api接口的統(tǒng)一出口*/
// 文章模塊接口
import article from '@/api/article';
// 其他模塊的接口……// 導出接口
export default {    article,// ……
}

index.js是一個api接口的出口，這樣就可以把api接口根據功能劃分為多個模塊，利于多人協(xié)作開發(fā)，比如一個人只負責一個模塊的開發(fā)等，還能方便每個模塊中接口的命名哦。

base.js:

/*** 接口域名的管理*/
const base = {    sq: 'https://xxxx111111.com/api/v1',    bd: 'http://xxxxx22222.com/api'
}export default base;

通過base.js來管理我們的接口域名，不管有多少個都可以通過這里進行接口的定義。即使修改起來，也是很方便的。

最后就是接口模塊的說明，例如上面的article.js:

/*** article模塊接口列表*/import base from './base'; // 導入接口域名列表
import axios from '@/utils/http'; // 導入http中創(chuàng)建的axios實例
import qs from 'qs'; // 根據需求是否導入qs模塊const article = {    // 新聞列表    articleList () {        return axios.get(`${base.sq}/topics`);    },    // 新聞詳情,演示    articleDetail (id, params) {        return axios.get(`${base.sq}/topic/${id}`, {            params: params        });    },// post提交    login (params) {        return axios.post(`${base.sq}/accesstoken`, qs.stringify(params));    }// 其他接口…………
}export default article;

1.通過直接引入我們封裝好的axios實例，然后定義接口、調用axios實例并返回，可以更靈活的使用axios，比如你可以對post請求時提交的數據進行一個qs序列化的處理等。

2.請求的配置更靈活，你可以針對某個需求進行一個不同的配置。關于配置的優(yōu)先級，axios文檔說的很清楚，這個順序是：在 lib/defaults.js 找到的庫的默認值，然后是實例的 defaults 屬性，最后是請求的 config 參數。后者將優(yōu)先于前者。

3.restful風格的接口，也可以通過這種方式靈活的設置api接口地址。

最后，為了方便api的調用，我們需要將其掛載到vue的原型上。在main.js中：

import Vue from 'vue'
import App from './App'
import router from './router' // 導入路由文件
import store from './store' // 導入vuex文件
import api from './api' // 導入api接口Vue.prototype.$api = api; // 將api掛載到vue的原型上

然后我們可以在頁面中這樣調用接口，eg：

methods: {    onLoad(id) {      this.$api.article.articleDetail(id, {        api: 123      }).then(res=> {// 執(zhí)行某些操作      })    }  
}

再提一下斷網的處理，這里只做一個簡單的示例：

<template>  <div id="app">    <div v-if="!network">      <h3>我沒網了</h3>      <div @click="onRefresh">刷新</div>      </div>    <router-view/>      </div>
</template><script>import { mapState } from 'vuex';export default {  name: 'App',  computed: {    ...mapState(['network'])  },  methods: {    // 通過跳轉一個空頁面再返回的方式來實現刷新當前頁面數據的目的onRefresh () {      this.$router.replace('/refresh')    }  }}
</script>

這是app.vue，這里簡單演示一下斷網。在http.js中介紹了，我們會在斷網的時候，來更新vue中network的狀態(tài)，那么這里我們根據network的狀態(tài)來判斷是否需要加載這個斷網組件。斷網情況下，加載斷網組件，不加載對應頁面的組件。當點擊刷新的時候，我們通過跳轉refesh頁面然后立即返回的方式來實現重新獲取數據的操作。因此我們需要新建一個refresh.vue頁面，并在其beforeRouteEnter鉤子中再返回當前頁面。

// refresh.vue
beforeRouteEnter (to, from, next) {next(vm => {            vm.$router.replace(from.fullPath)        })    
}

這是一種全局通用的斷網提示，當然了，也可以根據自己的項目需求操作。具體操作就仁者見仁智者見智了。

如果更多的需求，或者說是不一樣的需求，可以根據自己的需求進行一個改進。

如果感覺對你有幫助，那就收藏??吧！

轉發(fā)在看就是最大的支持??