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)
}

總結

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