axios封裝，統一不同請求方法時的調用方式

import axios from 'axios'

// 請求超時設置
axios.defaults.timeout = 3000

/*
 * 設置生產環境/開發環境下的請求基路徑(需后台設置允許跨域)
 * 開發環境下的跨域,也可使用webpack的devServer來設置proxy代理的方式來解決
 */
if(process.env.NODE_ENV === 'production') {
    axios.defaults.baseURL = 'http://127.0.0.1:5050/'
}else if(process.env.NODE_ENV === 'development') {
    //設置開發環境下的請求基路徑, 如果是使用了webpack的devServer,來設置了代理,那么此處就不需設置了
}

// 添加request攔截器
axios.interceptors.request.use((config) => {
    // do something, 如接口請求的loading處理
    return config
}, (error) => {
    return Promise.reject(error)
})

// 添加response攔截器
axios.interceptors.response.use((response) => {
    // do something
    return response
}, (error) => {
    return Promise.reject(error)
})

/**
 * @func
 * @desc axios 請求封裝
 * @param {object} req - 請求接口需要的url,method,請求頭等基礎信息
 * @param {object} params - 請求接口需要請求的參數
 */

const http = (req, params) => {
    return new Promise((resolve, reject) => {
        let para = {}
        if ((['get', 'delete', 'head', 'options'].indexOf(req.method) > -1)) {
            para = {
                params: params || {}
            }
        }
        if ((['post', 'put', 'patch'].indexOf(req.method) > -1)) {
            para = {
                data: params || {}
            }
        }
        axios({
            ...req,
            ...para
        }).then((response) => {
            if(response.status === 200) {
                resolve(response)
            }else {
                alert(response.data.message)
            }
        }).catch((error) => {
            reject(error)
        }).finally(() => {

        })
    })
}

// 定義所有接口請求的信息
const url = {
    movie: {
        url: '/movie/query',
        method: 'get'
    },
    book: {
        url: '/book/query',
        method: 'get'
    }
}

export {
    http,
    url
}

/**
 * 使用方式示例：
    http(url.movie).then((res) => {
        this.result = res.data.info
    })  
*/

說明：實質的封裝從const http開始，請求基路徑設置的部分，暫時可以忽略，后面會單獨對環境變量process.env.NODE_ENV進行分析實踐和記錄。 https://www.cnblogs.com/chaoyueqi/p/11232844.html

以上代碼的封裝基礎為axios，版本為^0.19.0，https://www.npmjs.com/package/axios