在Vue專案中，如果沒有引入JQuery，那麼使用axios來做http請求將是一個不錯的選擇，因為它相對於ajax不需要引入JQuery包，這樣專案就會小很多。

先引入axios依賴包

$ yarn add axios vue-axios

下面，我們來看一下axios的常用基本配置

匯入axios，一般我們會在一個公共方法js檔案裡做一下操作，它通常被命名為util.js

import axios from 'axios'

// 全域性設定超時時間
axios.defaults.timeout = 20000

// 請求路由攔截 一般在此處配置請求頭和token
axios.interceptors.request.use(function (config) {
    let token = sessionStorage.getItem("user_token");
    if (config.method == 'get') {
        config.headers = {
            'Content-Type': 'application/json',
            'Authorization': token
        }
        config.data = true
    } else {
        config.headers = {
            'Content-Type': 'application/json',
            'Authorization': token
        }
    }
    return config
}, function (error) {
    return Promise.reject(error)
})

// respone攔截器 響應路由攔截 一般在此處做返回錯誤碼的後續操作，比如沒有許可權跳回登入頁
axios.interceptors.response.use(
    response => {
        const res = response.data
        return response
    },
    error => {
        if (error.response.status == 401) { // 沒有許可權
            Message({
                message: '登入過期，請重新登入！',
                type: 'error'
            })
            window.location.href = '/#/login'
        }
        if (error.response.status == 403) { // 被拒絕訪問
            Message({
                message: '您沒有此操作的許可權！',
                type: 'error'
            })
            window.location.href = '/#/error?code=' + 403
        }
        if (error.response.status == 502) { // 伺服器錯誤
            Message({
                message: '伺服器正在釋出中，請稍後重試！',
                type: 'error'
            })
            window.location.href = '/#/login'
        }
        return Promise.reject(error)
    }
)

axios.defaults.headers.delete['Content-Type'] = 'application/x-www-form-urlencoded' // 單獨配置delete的請求頭

// 以下是幾種常用的公共方法
var instance = axios.create({
    headers: { 'content-type': 'multipart/form-data' }
});

export default {
    Get(url, params = {}) {
        return new Promise((resolve, reject) => {
            axios.get(url, {
                params
            }).then(res => {
                resolve(res.data)
            }).catch(err => {
                reject(err.data)
            })
        })
    },
    Getfile(url, params = {}, name) {
        return new Promise((resolve, reject) => {
            axios.get(url, {
                params,
                responseType: 'blob'
            }).then(res => {
                resolve(res.data)
                let blob = new Blob([res.data], {
                    type: 'application/vnd.ms-excel'
                })
                // 先轉碼再解碼
                let fileName
                // let fileName = decodeURI(escape(res.headers['content-disposition'].split('filename=')[1]))
                if (name && name != '' && name != null) {
                    fileName = name
                } else {
                    fileName = decodeURI(res.headers['content-disposition'].split('filename=')[1])
                }
                if (window.navigator.msSaveOrOpenBlob) {
                    navigator.msSaveBlob(blob, fileName)
                } else {
                    var link = document.createElement('a')
                    link.href = window.URL.createObjectURL(blob)
                    link.download = fileName
                    link.click()
                    Message({
                        message: '下載成功！',
                        type: 'success'
                    })
                    //釋放記憶體
                    window.URL.revokeObjectURL(link.href)
                }
            }).catch(err => {
                console.log('err', err)
                if (err) {
                    Message({
                        message: '下載失敗！',
                        type: 'error'
                    })
                }
                reject(err.data)
            })
        })
    },
    Postfile(url, params = {}) {
        return new Promise((resolve, reject) => {
            axios.post(url,
                params,
                { responseType: 'blob' }
            ).then(res => {
                resolve(res.data)
                let blob = new Blob([res.data], {
                    type: 'application/vnd.ms-excel'
                })
                // 先轉碼再解碼
                // let fileName = decodeURI(escape(res.headers['content-disposition'].split('filename=')[1]))
                let fileName = decodeURI(res.headers['content-disposition'].split('filename=')[1])
                if (window.navigator.msSaveOrOpenBlob) {
                    navigator.msSaveBlob(blob, fileName)
                } else {
                    var link = document.createElement('a')
                    link.href = window.URL.createObjectURL(blob)
                    link.download = fileName
                    link.click()
                    Message({
                        message: '下載成功！',
                        type: 'success'
                    })
                    //釋放記憶體
                    window.URL.revokeObjectURL(link.href)
                }
            }).catch(err => {
                if (err) {
                    Message({
                        message: '下載失敗！',
                        type: 'error'
                    })
                }
                reject(err.data)
            })
        })
    },
    Post(url, params = {}) {
        return new Promise((resolve, reject) => {
            axios.post(url, params)
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err.data)
                })
        })
    },
    Postform(url, data = {}) {
        return new Promise((resolve, reject) => {
            instance.post(url, data)
                .then(res => {
                    resolve(res.data);
                }, err => {
                    reject(err.data)
                })
        })
    },
    Put(url, params = {}) {
        return new Promise((resolve, reject) => {
            axios.put(url, params)
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err.data)
                })
        })
    },
    Delete(url, data = {}) {
        return new Promise((resolve, reject) => {
            axios.delete(url, data)
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err.data)
                })
        })
    },
}