vue中Axios封裝、API接口管理記錄

1、axios 的封裝

在Vue項目中，和後臺交互數據這塊，咱們一般使用的是axios庫，它是基於promise的http庫，可運行在瀏覽器端和node.js中。它有不少優秀的特性，例如攔截請求和響應、取消請求、轉換json、客戶端防護XSRF等。因此咱們的尤大大也是果斷放棄了對其官方庫vue_resource的維護，直接推薦咱們使用axios庫。若是還對axios不瞭解的，能夠移步axios文檔前端

安裝

npm install axios; // 安裝axios
複製代碼

引入

通常我會在項目的src目錄中，新建一個request文件夾，而後在裏面新建一個http.js和一個api.js文件。http.js文件用來封裝咱們的axios，api.js用來統一管理咱們的接口。vue

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模塊，用來序列化post類型的數據，後面會提到
// vant的toast提示框組件，你們可根據本身的UI組件更改
import {Toast} from 'vant'
複製代碼

環境的切換

咱們的項目環境可能有開發環境、測試環境和生產環境。咱們經過node的環境變量來匹配咱們的默認的接口url前綴。axios.defaults.baseURL能夠設置axios的默認請求地址就很少說了。node

// 環境的切換
if (process.env.NODE_ENV === 'development') {
    axios.defaults.baseURL = 'http://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，就會告知用戶當前請求超時，請刷新等。ios

axios.defaults.timeout = 10000;
複製代碼

post請求頭的設置

post請求的時候，咱們須要加上一個請求頭，因此能夠在這裏進行一個默認的設置，即設置post的請求頭爲application/x-www-form-urlencoded;charset=UTF-8ajax

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

請求攔截

咱們在發送請求前能夠進行一個請求的攔截，爲何要攔截呢，咱們攔截請求是用來作什麼的呢？好比，有些請求時用戶須要登陸以後才能訪問的，或者post請求的時候，咱們須要序列化咱們提價的數據。這時候，咱們能夠在請求被髮送以前進行一個攔截，從而進行咱們想要的操做。vuex

請求攔截

// 先導入vuex，由於咱們要使用到裏面的狀態對象
// vuex的路徑根據本身的路徑去寫；
import store from '@/store/index'

// 請求攔截器
axios.interceptors.request.use(    
    config => {        
        // 每次發送請求以前判斷vuex中是否存在token 
        // 若是存在，則統一在http請求的header都加上token，這樣後臺根據token判斷你的登陸狀況
        // 即便本地存在token，也有可能token是過時的，因此在響應攔截器中要對返回狀態進行判斷 
        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狀態。而後，在沒檔次請求接口的時候，都會在請求的header中攜帶token，後臺人員就能夠根據你攜帶的token來判斷你的登陸是否過時，若是沒有攜帶，則說明沒有登陸過。這時候或許有些小夥伴就會有疑問了，就是每一個請求都攜帶token，那麼要是一個頁面不須要用戶登陸就能夠訪問的怎麼辦呢？其實，你前端的請求能夠攜帶token，可是後臺能夠選擇不接受啊！npm

響應的攔截

// 響應器攔截
axios.interceptors.response.use(    
    response => {   
        // 若是返回的狀態碼爲200，說明接口請求成功，能夠正常拿到數據 
        // 不然的話拋出錯誤
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }    
    },    
    // 服務器狀態碼不是2開頭的的狀況
    // 這裏能夠跟大家的後臺開發人員協商好統一的錯誤狀態碼 
    // 而後根據返回的狀態碼進行一些操做，例如登陸過時提示，錯誤提示等等
    // 下面列舉幾個常見的操做，其餘需求可自行擴展
    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);
        }
    }    
});
複製代碼

響應攔截器很好理解，就是服務器返回給咱們的數據，咱們在拿到以前能夠對他進行一些處理。例如上面的思想：若是後臺返回的狀態碼是200，則正常返回數據，不然的根據錯誤的狀態碼類型進行一些咱們須要的錯誤，其實這裏主要就是進行了錯誤的統一處理和沒登陸或登陸過時後調整登陸頁的一個操做。json

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

封裝get方法和post方法

咱們經常使用的ajax請求方法有get、post、put等方法，相信小夥伴都不會陌生。axios對應的也有不少相似的方法，不清楚的能夠看下文檔。可是爲了簡化咱們的代碼，咱們仍是要對其進行一個簡單的封裝。下面咱們主要封裝兩個方法：get和post。api

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)
        })
    });
}
複製代碼

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

axios的封裝基本就完成了，下面再簡單說下api的統一管理

整齊的api就像電路板同樣，即便再複雜也能很清晰整個線路。上面說了，咱們會新建一個api.js，而後再整個文件中存放咱們全部的api接口。

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

/** * api接口統一管理 */
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接口，就在api.js中繼續往下面擴展就能夠了。友情提示，爲每一個接口寫好註釋哦！！！

api接口管理的一個好處就是，咱們把api統一集中起來，若是後期須要修改接口就，咱們就直接在api.js中找到對應的修改就行了，而不用去每個頁面查找咱們的接口而後再修改會很麻煩。關鍵是，萬一修改的量比較大，就規格gg了。還有就是若是直接在咱們的業務代碼修改接口，一不當心還容易動到咱們的業務代碼形成沒必要要的麻煩。

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

/**axios封裝
 * 請求攔截、相應攔截、錯誤統一處理
 */
import axios from 'axios';import QS from 'qs';
import { Toast } from 'vant';
import store from '../store/index'

// 環境的切換
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 => {
        // 每次發送請求以前判斷是否存在token，若是存在，則統一在http請求的header都加上token，不用每次請求都手動添加了
        // 即便本地存在token，也有可能token是過時的，因此在響應攔截器中要對返回狀態進行判斷
        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);        
        }    
    },
    // 服務器狀態碼不是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.優化axios封裝，去掉以前的get和post（一、2同一個代碼塊裏面）

2.斷網狀況處理（一、2同一個代碼塊裏面）

http.js中axios封裝的優化，先直接貼代碼：

/**
 * axios封裝
 * 請求攔截、響應攔截、錯誤統一處理
 */
import axios from 'axios';
import router from '../router';
import store from '../store/index';
import { Toast } from 'vant';

/** 
 * 提示函數 
 * 禁止點擊蒙層、顯示一秒後關閉
 */
const tip = msg => {    
    Toast({        
        message: msg,        
        duration: 1000,        
        forbidClick: true    
    });
}

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

/** 
 * 請求失敗後的錯誤統一處理 
 * @param {Number} status 請求失敗的狀態碼
 */
const errorHandle = (status, other) => {
    // 狀態碼判斷
    switch (status) {
        // 401: 未登陸狀態，跳轉登陸頁
        case 401:
            toLogin();
            break;
        // 403 token過時
        // 清除token並跳轉登陸頁
        case 403:
            tip('登陸過時，請從新登陸');
            localStorage.removeItem('token');
            store.commit('loginSuccess', null);
            setTimeout(() => {
                toLogin();
            }, 1000);
            break;
        // 404請求不存在
        case 404:
            tip('請求的資源不存在'); 
            break;
        default:
            console.log(other);   
        }}

// 建立axios實例
var instance = axios.create({    timeout: 1000 * 12});
// 設置post請求頭
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/** 
 * 請求攔截器 
 * 每次請求前，若是存在token則在請求頭中攜帶token 
 */ 
instance.interceptors.request.use(    
    config => {        
        // 登陸流程控制中，根據本地是否存在token判斷用戶的登陸狀況        
        // 可是即便token存在，也有可能token是過時的，因此在每次的請求頭中攜帶token        
        // 後臺根據攜帶的token判斷用戶的登陸狀況，並返回給咱們對應的狀態碼        
        // 然後咱們能夠在響應攔截器中，根據狀態碼進行一些統一的操做。        
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },    
    error => Promise.error(error))

// 響應攔截器
instance.interceptors.response.use(    
    // 請求成功
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
    // 請求失敗
    error => {
        const { response } = error;
        if (response) {
            // 請求已發出，可是不在2xx的範圍 
            errorHandle(response.status, response.data.message);
            return Promise.reject(response);
        } else {
            // 處理斷網的狀況
            // eg:請求超時或斷網時，更新state的network狀態
            // network狀態在app.vue中控制着一個全局的斷網提示組件的顯示隱藏
            // 關於斷網組件中的刷新從新獲取數據，會在斷網組件中說明
            if (!window.navigator.onLine) {
               store.commit('changeNetwork', false);
            } else {
                return Promise.reject(error);
            }
        }
    });

export default instance;
複製代碼

這個axios和以前的大同小異，作了以下幾點改變：

1.去掉了以前get和post方法的封裝，經過建立一個axios實例然而後export default方法處處，這樣使用起來更靈活一些。

2.去掉了經過環境變量控制baseUrl的值。考慮到接口會有多個不一樣域名的狀況，因此準備經過js變量來控制接口域名。這點具體在api裏會介紹。

3.增長了請求超時，即斷網狀態的處理。說下思路，當斷網時，經過更新vuex中network的狀態來控制斷網提示組件的顯示隱藏。斷網提示通常會有從新加載數據的操做，這步會在後面對應的地方介紹。

4.公共函數進行抽出，簡化代碼，儘可能保證單一職責原則。

3.更加模塊化的api管理

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

1.更加模塊化

2.更方便多人開發，有效減小解決命名衝突

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

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

先放index.js代碼：

/** 
 * api接口的統一出口
 */
// 文章模塊接口
import article from '@/api/article';
// 其餘模塊的接口……

// 導出接口
export default {    
    article,
    // ……
}
複製代碼

index.js是一個api接口的出口，這樣就能夠把api接口根據功能劃分爲多個模塊，利於多人協做開發，好比一我的只負責一個模塊的開發等，還能方便每一個模塊中接口的命名哦。

4.接口域名有多個的狀況

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中建立的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.請求的配置更靈活，你能夠針對某個需求進行一個不一樣的配置。關於配置的優先級，axios文檔說的很清楚，這個順序是：在 lib/defaults.js 找到的庫的默認值，而後是實例的 defaults 屬性，最後是請求的 config 參數。後者將優先於前者。

3.restful風格的接口，也能夠經過這種方式靈活的設置api接口地址。

5.api掛在到vue.prototype上省去引入的步驟

最後，爲了方便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=> {
            // 執行某些操做      
        })    
    }  
}
複製代碼

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

<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的狀態，那麼這裏咱們根據network的狀態來判斷是否須要加載這個斷網組件。斷網狀況下，加載斷網組件，不加載對應頁面的組件。當點擊刷新的時候，咱們經過跳轉refesh頁面而後當即返回的方式來實現從新獲取數據的操做。所以咱們須要新建一個refresh.vue頁面，並在其beforeRouteEnter鉤子中再返回當前頁面。

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

這是一種全局通用的斷網提示，固然了，也能夠根據本身的項目需求操做。具體操做就仁者見仁智者見智了。

若是更多的需求，或者說是不同的需求，能夠根據本身的需求進行一個改進。

若是感受對你有幫助，那就收藏❤❤吧！（此文借鑑他人及作此我的記錄）