vue中对axios进行封装

在刚结束的项目中对axios进行了实践（好不容易碰上一个不是jsonp的项目），

以下为在项目中对axios的封装，仅封装了post方法，因为项目中只用到了post，如有需要请自行进行修改

src/config.js

//api接口前缀
export const apiBaseUrl = 'http://xxx.xxx.xxx.xxx:8888/test/'

src/axios.js

import axios from 'axios'
import qs from 'qs'
import { apiBaseUrl } from './config.js'



//请求拦截器
axios.interceptors.request.use(function (param) {
    return param
}, function (error) {
    // 请求错误
    return Promise.reject(error)
})


// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    return response.data
}, function (error) {
    // 响应错误
    return Promise.reject(error)
})

// 封装axios--------------------------------------------------------------------------------------
function apiAxios(url, params) {
    let httpDefault = {
        method: "POST",
        baseURL: apiBaseUrl,
        url: url,
        data: qs.stringify(params),
    }

    return new Promise((resolve, reject) => {
        axios(httpDefault)
            // 此处的.then属于axios
            .then((res) => {
                resolve(res)
            }).catch((response) => {
                reject(response)
            })
    })
}


export default {
    install: function (Vue) {
        Vue.prototype.$axios = (url, params) => apiAxios(url, params)
    }
}

src/main.js

import axios from "@/axios.js"

Vue.use(axios)