https://juejin.im/post/5b55c118f265da0f6f1aa354 掘金的網(wǎng)址（很好）

一捅彻、axios的封裝

在vue項目中组去，和后臺交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫步淹，它是基于promise的http庫从隆，可運(yùn)行在瀏覽器端和node.js中。他有很多優(yōu)秀的特性贤旷，例如攔截請求和響應(yīng)广料、取消請求、轉(zhuǎn)換json幼驶、客戶端防御cSRF等艾杏。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護(hù)，直接推薦我們使用axios庫。如果還對axios不了解的慕爬，可以移步axios文檔扑庞。
安裝

npm install axios; // 安裝axios復(fù)制代碼

引入
一般我會在項目的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類型的數(shù)據(jù)辉懒，后面會提到
// vant的toast提示框組件阳惹，大家可根據(jù)自己的ui組件更改。
import { Toast } from 'vant'; 

復(fù)制代碼

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

// 環(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';
}
// 復(fù)制代碼

設(shè)置請求超時
通過axios.defaults.timeout設(shè)置默認(rèn)的請求超時時間纲岭。例如超過了10s，就會告知用戶當(dāng)前請求超時线罕，請刷新等止潮。

axios.defaults.timeout = 10000;復(fù)制代碼

post請求頭的設(shè)置
post請求的時候，我們需要加上一個請求頭钞楼，所以可以在這里進(jìn)行一個默認(rèn)的設(shè)置沽翔，即設(shè)置post的請求頭為application/x-www-form-urlencoded;charset=UTF-8

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';復(fù)制代碼

請求攔截

我們在發(fā)送請求前可以進(jìn)行一個請求的攔截，為什么要攔截呢，我們攔截請求是用來做什么的呢仅偎？比如跨蟹，有些請求是需要用戶登錄之后才能訪問的，或者post請求的時候橘沥，我們需要序列化我們提交的數(shù)據(jù)窗轩。這時候，我們可以在請求被發(fā)送之前進(jìn)行一個攔截座咆，從而進(jìn)行我們想要的操作痢艺。

請求攔截

// 先導(dǎo)入vuex,因?yàn)槲覀円褂玫嚼锩娴臓顟B(tài)對象
// vuex的路徑根據(jù)自己的路徑去寫
import store from '@/store/index';

// 請求攔截器axios.interceptors.request.use(    
   config => {        
       // 每次發(fā)送請求之前判斷vuex中是否存在token        
       // 如果存在，則統(tǒng)一在http請求的header都加上token介陶，這樣后臺根據(jù)token判斷你的登錄情況
       // 即使本地存在token堤舒，也有可能token是過期的，所以在響應(yīng)攔截器中要對返回狀態(tài)進(jìn)行判斷 
       const token = store.state.token;        
       token && (config.headers.Authorization = token);        
       return config;    
   },    
   error => {        
       return Promise.error(error);    
})

這里說一下token哺呜，一般是在登錄完成之后舌缤，將用戶的token通過localStorage或者cookie存在本地，然后用戶每次在進(jìn)入頁面的時候（即在main.js中）某残，會首先從本地存儲中讀取token国撵，如果token存在說明用戶已經(jīng)登陸過，則更新vuex中的token狀態(tài)玻墅。然后介牙，在每次請求接口的時候，都會在請求的header中攜帶token澳厢，后臺人員就可以根據(jù)你攜帶的token來判斷你的登錄是否過期环础，如果沒有攜帶，則說明沒有登錄過剩拢。這時候或許有些小伙伴會有疑問了线得，就是每個請求都攜帶token，那么要是一個頁面不需要用戶登錄就可以訪問的怎么辦呢裸扶？其實(shí)框都，你前端的請求可以攜帶token搬素，但是后臺可以選擇不接收昂浅俊！
響應(yīng)的攔截

// 響應(yīng)攔截器
axios.interceptors.response.use(    
   response => {   
       // 如果返回的狀態(tài)碼為200熬尺，說明接口請求成功摸屠，可以正常拿到數(shù)據(jù)     
       // 否則的話拋出錯誤
       if (response.status === 200) {            
           return Promise.resolve(response);        
       } else {            
           return Promise.reject(response);        
       }    
   },    
   // 服務(wù)器狀態(tài)碼不是2開頭的的情況
   // 這里可以跟你們的后臺開發(fā)人員協(xié)商好統(tǒng)一的錯誤狀態(tài)碼    
   // 然后根據(jù)返回的狀態(tài)碼進(jìn)行一些操作，例如登錄過期提示粱哼，錯誤提示等等
   // 下面列舉幾個常見的操作季二，其他需求可自行擴(kuò)展
   error => {            
       if (error.response.status) {            
           switch (error.response.status) {                
               // 401: 未登錄
               // 未登錄則跳轉(zhuǎn)登錄頁面，并攜帶當(dāng)前頁面的路徑
               // 在登錄成功后返回當(dāng)前頁面，這一步需要在登錄頁操作胯舷。                
               case 401:                    
                   router.replace({                        
                       path: '/login',                        
                       query: { 
                           redirect: router.currentRoute.fullPath 
                       }
                   });
                   break;

               // 403 token過期
               // 登錄過期對用戶進(jìn)行提示
               // 清除本地token和清空vuex中token對象
               // 跳轉(zhuǎn)登錄頁面                
               case 403:
                    Toast({
                       message: '登錄過期刻蚯，請重新登錄',
                       duration: 1000,
                       forbidClick: true
                   });
                   // 清除token
                   localStorage.removeItem('token');
                   store.commit('loginSuccess', null);
                   // 跳轉(zhuǎn)登錄頁面，并將要瀏覽的頁面fullPath傳過去桑嘶，登錄成功后跳轉(zhuǎn)需要訪問的頁面 
                   setTimeout(() => {                        
                       router.replace({                            
                           path: '/login',                            
                           query: { 
                               redirect: router.currentRoute.fullPath 
                           }                        
                       });                    
                   }, 1000);                    
                   break; 

               // 404請求不存在
               case 404:
                   Toast({
                       message: '網(wǎng)絡(luò)請求不存在',
                       duration: 1500,
                       forbidClick: true
                   });
                   break;
               // 其他錯誤炊汹，直接拋出錯誤提示
               default:
                   Toast({
                       message: error.response.data.message,
                       duration: 1500,
                       forbidClick: true
                   });
           }
           return Promise.reject(error.response);
       }
   }    
});

響應(yīng)攔截器很好理解，就是服務(wù)器返回給我們的數(shù)據(jù)逃顶，我們在拿到之前可以對他進(jìn)行一些處理讨便。例如上面的思想：如果后臺返回的狀態(tài)碼是200，則正常返回數(shù)據(jù)以政，否則的根據(jù)錯誤的狀態(tài)碼類型進(jìn)行一些我們需要的錯誤霸褒，其實(shí)這里主要就是進(jìn)行了錯誤的統(tǒng)一處理和沒登錄或登錄過期后調(diào)整登錄頁的一個操作。
要注意的是盈蛮，上面的Toast()方法废菱，是我引入的vant庫中的toast輕提示組件，你根據(jù)你的ui庫眉反，對應(yīng)使用你的一個提示組件昙啄。

封裝get方法和post方法

我們常用的ajax請求方法有g(shù)et、post寸五、put等方法梳凛，相信小伙伴都不會陌生。axios對應(yīng)的也有很多類似的方法梳杏，不清楚的可以看下文檔韧拒。但是為了簡化我們的代碼，我們還是要對其進(jìn)行一個簡單的封裝十性。下面我們主要封裝兩個方法：get和post叛溢。
get方法：我們通過定義一個get函數(shù)，get函數(shù)有兩個參數(shù)劲适，第一個參數(shù)表示我們要請求的url地址楷掉，第二個參數(shù)是我們要攜帶的請求參數(shù)。get函數(shù)返回一個promise對象霞势，當(dāng)axios其請求成功時resolve服務(wù)器返回 值烹植，請求失敗時reject錯誤值。最后通過export拋出get函數(shù)愕贡。

/**
* get方法草雕，對應(yīng)get請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數(shù)]
*/
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方法必須要使用對提交從參數(shù)對象進(jìn)行序列化的操作墩虹，所以這里我們通過node的qs模塊來序列化我們的參數(shù)嘱巾。這個很重要，如果沒有序列化操作诫钓，后臺是拿不到你提交的數(shù)據(jù)的旬昭。這就是文章開頭我們import QS from 'qs';的原因。如果不明白序列化是什么意思的菌湃，就百度一下吧稳懒，答案一大堆。

/** 
* post方法慢味，對應(yīng)post請求 
* @param {String} url [請求的url地址] 
* @param {Object} params [請求時攜帶的參數(shù)] 
*/
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)
       })
   });
}

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

axios的封裝基本就完成了，下面再簡單說下api的統(tǒng)一管理叫编。
整齊的api就像電路板一樣辖佣，即使再復(fù)雜也能很清晰整個線路。上面說了搓逾，我們會新建一個api.js,然后在這個文件中存放我們所有的api接口卷谈。

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

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

現(xiàn)在，例如我們有這樣一個接口霞篡，是一個post請求：

http://www.baiodu.com/api/v1/users/my_address/address_edit_before復(fù)制代碼
我們可以在api.js中這樣封裝：

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

我們定義了一個apiAddress方法世蔗，這個方法有一個參數(shù)p，p是我們請求接口時攜帶的參數(shù)對象朗兵。而后調(diào)用了我們封裝的post方法污淋，post方法的第一個參數(shù)是我們的接口地址，第二個參數(shù)是apiAddress的p參數(shù)余掖，即請求接口時攜帶的參數(shù)對象寸爆。最后通過export導(dǎo)出apiAddress。
然后在我們的頁面中可以這樣調(diào)用我們的api接口：

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

其他的api接口赁豆，就在pai.js中繼續(xù)往下面擴(kuò)展就可以了。友情提示找田，為每個接口寫好注釋哦８韬Ｗ藕墩衙！
api接口管理的一個好處就是，我們把a(bǔ)pi統(tǒng)一集中起來，如果后期需要修改接口漆改，我們就直接在api.js中找到對應(yīng)的修改就好了心铃，而不用去每一個頁面查找我們的接口然后再修改會很麻煩。關(guān)鍵是挫剑，萬一修改的量比較大去扣，就規(guī)格gg了。還有就是如果直接在我們的業(yè)務(wù)代碼修改接口樊破，一不小心還容易動到我們的業(yè)務(wù)代碼造成不必要的麻煩愉棱。

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

/**axios封裝
* 請求攔截奔滑、相應(yīng)攔截、錯誤統(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是過期的梅猿，所以在響應(yīng)攔截器中要對返回狀態(tài)進(jìn)行判斷
       const token = store.state.token;        
       token && (config.headers.Authorization = token);        
       return config;    
   },    
   error => {        
       return Promise.error(error);    
   })

// 響應(yīng)攔截器
axios.interceptors.response.use(    
   response => {        
       if (response.status === 200) {            
           return Promise.resolve(response);        
       } else {            
           return Promise.reject(response);        
       }    
   },
   // 服務(wù)器狀態(tài)碼不是200的情況    
   error => {        
       if (error.response.status) {            
           switch (error.response.status) {                
               // 401: 未登錄                
               // 未登錄則跳轉(zhuǎn)登錄頁面，并攜帶當(dāng)前頁面的路徑                
               // 在登錄成功后返回當(dāng)前頁面秒裕，這一步需要在登錄頁操作袱蚓。                
               case 401:                    
                   router.replace({                        
                       path: '/login',                        
                       query: { redirect: router.currentRoute.fullPath } 
                   });
                   break;
               // 403 token過期                
               // 登錄過期對用戶進(jìn)行提示                
               // 清除本地token和清空vuex中token對象                
               // 跳轉(zhuǎn)登錄頁面                
               case 403:                     
                   Toast({                        
                       message: '登錄過期，請重新登錄',                        
                       duration: 1000,                        
                       forbidClick: true                    
                   });                    
                   // 清除token                    
                   localStorage.removeItem('token');                    
                   store.commit('loginSuccess', null);                    
                   // 跳轉(zhuǎn)登錄頁面几蜻，并將要瀏覽的頁面fullPath傳過去癞松，登錄成功后跳轉(zhuǎn)需要訪問的頁面
                   setTimeout(() => {                        
                       router.replace({                            
                           path: '/login',                            
                           query: { 
                               redirect: router.currentRoute.fullPath 
                           }                        
                       });                    
                   }, 1000);                    
                   break; 
               // 404請求不存在                
               case 404:                    
                   Toast({                        
                       message: '網(wǎng)絡(luò)請求不存在',                        
                       duration: 1500,                        
                       forbidClick: true                    
                   });                    
               break;                
               // 其他錯誤，直接拋出錯誤提示                
               default:                    
                   Toast({                        
                       message: error.response.data.message,                        
                       duration: 1500,                        
                       forbidClick: true                    
                   });            
           }            
           return Promise.reject(error.response);        
       }       
   }
);
/** 
* get方法入蛆，對應(yīng)get請求 
* @param {String} url [請求的url地址] 
* @param {Object} params [請求時攜帶的參數(shù)] 
*/
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方法响蓉，對應(yīng)post請求 
* @param {String} url [請求的url地址] 
* @param {Object} params [請求時攜帶的參數(shù)] 
*/
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)        
       })    
   });
}

如果喜歡，就給個??吧(^▽)

*********華麗麗的分割線******************華麗麗的分割線******************華麗麗的分割線******************華麗麗的分割線******************華麗麗的分割線*********
2018.8.14更新
axios的封裝根據(jù)需求的不同而不同哨毁。這里非常感謝評論里一些很中肯的建議枫甲，我也對此進(jìn)行了思考和針對不同需求的改善。主要有以下改變：
1.優(yōu)化axios封裝扼褪，去掉之前的get和post
2.斷網(wǎng)情況處理
3.更加模塊化的api管理
4.接口域名有多個的情況
5.api掛載到vue.prototype上省去引入的步驟

http.js中axios封裝的優(yōu)化想幻，先直接貼代碼：

/**
* axios封裝
* 請求攔截、響應(yīng)攔截话浇、錯誤統(tǒng)一處理
*/
import axios from 'axios';
import router from '../router';
import store from '../store/index';
import { Toast } from 'vant';

/** 
* 提示函數(shù) 
* 禁止點(diǎn)擊蒙層脏毯、顯示一秒后關(guān)閉
*/
const tip = msg => {    
   Toast({        
       message: msg,        
       duration: 1000,        
       forbidClick: true    
   });
}

/** 
* 跳轉(zhuǎn)登錄頁
* 攜帶當(dāng)前頁面路由，以期在登錄頁面完成登錄后返回當(dāng)前頁面
*/
const toLogin = () => {
   router.replace({
       path: '/login',        
       query: {
           redirect: router.currentRoute.fullPath
       }
   });
}

/** 
* 請求失敗后的錯誤統(tǒng)一處理 
* @param {Number} status 請求失敗的狀態(tài)碼
*/
const errorHandle = (status, other) => {
   // 狀態(tài)碼判斷
   switch (status) {
       // 401: 未登錄狀態(tài)幔崖，跳轉(zhuǎn)登錄頁
       case 401:
           toLogin();
           break;
       // 403 token過期
       // 清除token并跳轉(zhuǎn)登錄頁
       case 403:
           tip('登錄過期食店，請重新登錄');
           localStorage.removeItem('token');
           store.commit('loginSuccess', null);
           setTimeout(() => {
               toLogin();
           }, 1000);
           break;
       // 404請求不存在
       case 404:
           tip('請求的資源不存在'); 
           break;
       default:
           console.log(other);   
       }}

// 創(chuàng)建axios實(shí)例
var instance = axios.create({    timeout: 1000 * 12});
// 設(shè)置post請求頭
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/** 
* 請求攔截器 
* 每次請求前渣淤，如果存在token則在請求頭中攜帶token 
*/ 
instance.interceptors.request.use(    
   config => {        
       // 登錄流程控制中，根據(jù)本地是否存在token判斷用戶的登錄情況        
       // 但是即使token存在吉嫩，也有可能token是過期的价认，所以在每次的請求頭中攜帶token        
       // 后臺根據(jù)攜帶的token判斷用戶的登錄情況，并返回給我們對應(yīng)的狀態(tài)碼        
       // 而后我們可以在響應(yīng)攔截器中自娩，根據(jù)狀態(tài)碼進(jìn)行一些統(tǒng)一的操作用踩。        
       const token = store.state.token;        
       token && (config.headers.Authorization = token);        
       return config;    
   },    
   error => Promise.error(error))

// 響應(yīng)攔截器
instance.interceptors.response.use(    
   // 請求成功
   res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
   // 請求失敗
   error => {
       const { response } = error;
       if (response) {
           // 請求已發(fā)出，但是不在2xx的范圍 
           errorHandle(response.status, response.data.message);
           return Promise.reject(response);
       } else {
           // 處理斷網(wǎng)的情況
           // eg:請求超時或斷網(wǎng)時忙迁，更新state的network狀態(tài)
           // network狀態(tài)在app.vue中控制著一個全局的斷網(wǎng)提示組件的顯示隱藏
           // 關(guān)于斷網(wǎng)組件中的刷新重新獲取數(shù)據(jù)脐彩，會在斷網(wǎng)組件中說明
           store.commit('changeNetwork', false);
       }
   });

export default instance;

這個axios和之前的大同小異，做了如下幾點(diǎn)改變：
1.去掉了之前get和post方法的封裝姊扔，通過創(chuàng)建一個axios實(shí)例然后export default方法導(dǎo)出丁屎，這樣使用起來更靈活一些。
2.去掉了通過環(huán)境變量控制baseUrl的值旱眯〕看ǎ考慮到接口會有多個不同域名的情況，所以準(zhǔn)備通過js變量來控制接口域名删豺。這點(diǎn)具體在api里會介紹共虑。
3.增加了請求超時，即斷網(wǎng)狀態(tài)的處理呀页。說下思路妈拌，當(dāng)斷網(wǎng)時，通過更新vuex中network的狀態(tài)來控制斷網(wǎng)提示組件的顯示隱藏蓬蝶。斷網(wǎng)提示一般會有重新加載數(shù)據(jù)的操作尘分，這步會在后面對應(yīng)的地方介紹。
4.公用函數(shù)進(jìn)行抽出丸氛，簡化代碼培愁，盡量保證單一職責(zé)原則。

下面說下api這塊缓窜，考慮到一下需求：
1.更加模塊化
2.更方便多人開發(fā)定续，有效減少解決命名沖突
3.處理接口域名有多個情況
這里這里呢新建了一個api文件夾，里面有一個index.js和一個base.js禾锤，以及多個根據(jù)模塊劃分的接口js文件私股。index.js是一個api的出口，base.js管理接口域名恩掷，其他js則用來管理各個模塊的接口倡鲸。
先放index.js代碼：

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

// 導(dǎo)出接口
export default {    
    article,
    // ……
}

index.js是一個api接口的出口，這樣就可以把a(bǔ)pi接口根據(jù)功能劃分為多個模塊黄娘，利于多人協(xié)作開發(fā)峭状，比如一個人只負(fù)責(zé)一個模塊的開發(fā)等克滴，還能方便每個模塊中接口的命名哦。
base.js:

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

export default base;

通過base.js來管理我們的接口域名宁炫，不管有多少個都可以通過這里進(jìn)行接口的定義。即使修改起來氮凝，也是很方便的羔巢。
最后就是接口模塊的說明，例如上面的article.js:

/**
* article模塊接口列表
*/

import base from './base'; // 導(dǎo)入接口域名列表
import axios from '@/utils/http'; // 導(dǎo)入http中創(chuàng)建的axios實(shí)例
import qs from 'qs'; // 根據(jù)需求是否導(dǎo)入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實(shí)例罩阵，然后定義接口竿秆、調(diào)用axios實(shí)例并返回，可以更靈活的使用axios稿壁，比如你可以對post請求時提交的數(shù)據(jù)進(jìn)行一個qs序列化的處理等幽钢。
2.請求的配置更靈活，你可以針對某個需求進(jìn)行一個不同的配置傅是。關(guān)于配置的優(yōu)先級匪燕，axios文檔說的很清楚，這個順序是：在 lib/defaults.js 找到的庫的默認(rèn)值喧笔，然后是實(shí)例的 defaults 屬性帽驯，最后是請求的 config 參數(shù)。后者將優(yōu)先于前者书闸。
3.restful風(fēng)格的接口尼变，也可以通過這種方式靈活的設(shè)置api接口地址。
最后浆劲，為了方便api的調(diào)用嫌术，我們需要將其掛載到vue的原型上。在main.js中：

import Vue from 'vue'
import App from './App'
import router from './router' // 導(dǎo)入路由文件
import store from './store' // 導(dǎo)入vuex文件
import api from './api' // 導(dǎo)入api接口

Vue.prototype.$api = api; // 將api掛載到vue的原型上復(fù)制代碼

然后我們可以在頁面中這樣調(diào)用接口牌借，eg：

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

再提一下斷網(wǎng)的處理度气，這里只做一個簡單的示例：

<template>  
   <div id="app">    
       <div v-if="!network">      
           <h3>我沒網(wǎng)了</h3>      
           <div @click="onRefresh">刷新</div>      
       </div>    
       <router-view/>      
   </div>
</template>

<script>
   import { mapState } from 'vuex';
   export default {  
       name: 'App',  
       computed: {    
           ...mapState(['network'])  
       },  
       methods: {    
           // 通過跳轉(zhuǎn)一個空頁面再返回的方式來實(shí)現(xiàn)刷新當(dāng)前頁面數(shù)據(jù)的目的
           onRefresh () {      
               this.$router.replace('/refresh')    
           }  
       }
   }
</script>

這是app.vue，這里簡單演示一下斷網(wǎng)膨报。在http.js中介紹了蚯嫌，我們會在斷網(wǎng)的時候，來更新vue中network的狀態(tài)丙躏，那么這里我們根據(jù)network的狀態(tài)來判斷是否需要加載這個斷網(wǎng)組件择示。斷網(wǎng)情況下，加載斷網(wǎng)組件晒旅，不加載對應(yīng)頁面的組件栅盲。當(dāng)點(diǎn)擊刷新的時候，我們通過跳轉(zhuǎn)refesh頁面然后立即返回的方式來實(shí)現(xiàn)重新獲取數(shù)據(jù)的操作废恋。因此我們需要新建一個refresh.vue頁面谈秫，并在其beforeRouteEnter鉤子中再返回當(dāng)前頁面扒寄。

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

這是一種全局通用的斷網(wǎng)提示，當(dāng)然了拟烫，也可以根據(jù)自己的項目需求操作该编。具體操作就仁者見仁智者見智了。

cnpm install axios -S
import axios from 'axios';
import { Message } from 'element-ui';

axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';


//http request 攔截器
axios.interceptors.request.use(
  config => {
    // const token = getCookie('名稱');注意使用的時候需要引入cookie方法硕淑，推薦js-cookie
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded'
    }
    // if(token){
    //   config.params = {'token':token}
    // }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);


//http response 攔截器
axios.interceptors.response.use(
  response => {
    if(response.data.errCode ==2){
      router.push({
        path:"/login",
        querry:{redirect:router.currentRoute.fullPath}//從哪個頁面跳轉(zhuǎn)
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)

/**
 * 封裝get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}


/**
 * 封裝post請求
 * @param url
 * @param data
 * @returns {Promise}
 */

 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
     axios.post(url,data)
          .then(response => {
            resolve(response.data);
          },err => {
            reject(err)
          })
   })
 }

 /**
 * 封裝patch請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.patch(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

 /**
 * 封裝put請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.put(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}