Vue axios api統一管理的封裝

axios的封裝

首先在項目的src目錄中，新建一個request文件夾，而後在裏面新建一個http.js。http.js文件用來封裝咱們的axios。

http.js中axios封裝的優化，先直接貼代碼： 1.設置請求超時 2.post請求頭的設置 3.請求攔截 4.響應的攔截 5.封裝get方法和post方法

• 建立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 api接口的封裝

一個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接口根據功能劃分爲多個模塊，利於多人協做開發，好比一我的只負責一個模塊的開發等，還能方便每一個模塊中接口的命名哦。

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接口地址。最後，爲了方便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的原型上
複製代碼

而後咱們能夠在頁面中這樣調用接口

methods: {    
    onLoad(id) {      
        this.$api.article.articleDetail(id, {        
            api: 123      
        }).then(res=> {
            // 執行某些操做      
        })    
    }  
}
複製代碼

歡迎你們來看看。

ps：有借鑑，嘻嘻。。。