vue中axios封装及自动设置域名

现在越来越多的 Vue.js 项目里使用 axios，而不在使用 vue-resource，在使用 axios 都会进行一次封装，接口集中管理，还有各个环境域名自动匹配设置

1、安装axios：

npm install --save axios

2、在 main.js 引用 axios

      因为我进行了一次封装，所以可能和大家引用的方式不一样，我是在src文件里创建了一个 fetch 文件夹，在 fetch 文件夹里又分别创建了 initFetch.js（接口一些参数配置和请求）和 urlConfig.js （存放的是各个环境域名的设置），如图：

urlConfig.js 里这样写，根据自己项目需求

const config = {
    'localhost': {
        baseUrl: '本地接口'
    },
    '开发环境域名': {
        baseUrl: '开发环境接口域名'
    },
    '测试环境域名': {
        baseUrl: '测试环境接口域名'
    }
}

const configParams = config[location.hostname]

if (configParams) {
    window.baseUrl = configParams.baseUrl
}
export default configParams

initFetch.js 里这样写，根据自己项目需求

import axios from 'axios'
const CancelToken = axios.CancelToken
function addCancel(config, $this, cancel) {
    if ($this) {
        config.CancelToken = new CancelToken(function executor(c) {
            $this[cancel] = c
        })
    }
}

const initFetch = (baseUrl, router) => {
    const instance = axios.create({
        // 设置超时时间 -30秒
        timeout: 30000,
        // 请求的baseUrl
        baseURL: baseUrl,
        // 请求头部信息
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        // 修改请求数据
        transformRequest: [function (data, headers) {
            let ret = ''
            for (let it in data) {
                // 去除空字符串的请求字段
                if (data[it] !== '' && data[it] !== undefined) {
                    if (ret !== '') ret += '&'
                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it])
                }
            }
            return ret
        }],
        // 跨域请求时允许携带凭证（cookie）
        withCredentials: process.env.NODE_ENV === 'production'
    })

    // 用户登录状态过期，路由重定向至登录界面
    instance.interceptors.response.use((res) => {
        if (res.data.code === '2001') {
            localStorage.clear()
            const route = router.history.pending || router.history.current
            if (route.path !== '/login' || route.name !== '404') {
                router.replace('/login')
            }
            return Promise.reject(res.data)
        }
        if (!res) {
            return Promise.reject(res)
        }
        return res.data
    }, (error) => {
        return Promise.reject(error)
    })

    function createAPI(url, method, data, $this, cancel) {
        let config = {
            method: method,
            url: url,
            data
        }
        addCancel(config, $this, cancel)
        return instance(config)
    }

    const apis = {
        // 发送手机验证码
        sendRegisterCode: (data, $this, cancel) => createAPI('/web/user/sendRegisterCode', 'post', data, $this, cancel)
    }
    return apis
}

export default initFetch

在main.js里引用一下：

3、项目里实际运用

 

以上就是本人在所使用的，可以满足大部分需求，至于更多的配置，请根据自己项目需要。如有哪里不合理的地方，欢迎指出。非常感谢