axios封裝

前言

作為出入vue的小萌新，我在寫請求的時候，也是毫不猶豫寫了ajax，結果肯定是不行的...
Vue 原本有一個官方推薦的 ajax 插件 vue-resource，但是自從 Vue 更新到 2.0 之后，官方就不再更新 vue-resource。
目前主流的 Vue 項目，都選擇 axios 來完成 ajax 請求。
關於axios的使用介紹，請看 axios中文說明

axios封裝（該文件名為axios.js）

/**
 * 引入axios，創建axios實例
 * 封裝axios請求攔截器
 */
import axios from 'axios'
import router from '@/router'
import store from '@/store'
import Lockr from 'lockr/lockr.js'
import { Message, MessageBox, Loading } from 'element-ui'
import qs from 'qs'

// 配置請求頭
var instance = axios.create({
    baseURL: 'http://127.0.0.1:9800',
    timeout: 5000,
});

// 這里我聲明了一個全局變量loading，來統一控制請求時的等待數據的loading效果。也可以在實際請求的時候寫loading，不過我覺得那樣太過繁瑣，多了許多代碼
let loading;

// request 攔截器  在請求或響應被 then 或 catch 處理前攔截它們
instance.interceptors.request.use(config => {
    // 請求時loading效果
    loading = Loading.service({ 
        fullscreen: true,
        lock: true,
        text: '正在加載，請稍等……',
        spinner: 'el-icon-loading'
    });
    // 讓每個請求攜帶token  token的key根據實際情況自定義
    if (store.getters.token) {
        config.data = Object.assign({ token: store.getters.token }, config.data)
    }

    // 請求參數序列化
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
    if (config.method === 'post' || config.method === "put" || config.method === "delete") {
        config.data = qs.stringify(config.data)
    }
    return config
}, error => {
    loading.close();
    // 對錯誤請求的處理
    // 彈出錯誤消息
    Message({
        showClose: true,
        message: error.message,
        type: 'error'
    })
    return Promise.reject(error);
})
// response攔截器  對請求結果做一些處理
instance.interceptors.response.use(response => {
    loading.close();
    // 這里根據從后端拿到的數據做一些處理，比如不同的code對應不同的處理方式等
}, error => {
    Message({
        message: error.message,
        type: 'error',
        duration: 5 * 1000
    })
    return Promise.reject(error)
})

/**
 * 封裝並導出get方法、post方法。
 */
export default {
    get(url, params) {
        return instance.get(url, params)
    },

    post(url, params) {
        return instance.post(url, params)
    }
}

如果需要對get請求或post請求返回的數據做一些特殊處理，需要寫在then()或catch()里面。

調用說明

import fetch from '@/utils/axios'

export function example(data){
    return fetch.post(axiosUrl,data)
}

總結

以上只是一個簡陋的封裝，只能說明一個大概的封裝思路。寫錯的地方還望大家多多指點~~~~