vuecli3 axios 二次封装

开发呢，不光要完成业务逻辑， 也要注重框架，思想，可维护性，可扩展性，可复用性，比如vue 开发一个很大的项目，可能就需要考虑

1. 路由模块化（功能少的时候不需要）

使用场景：比如一个项目主要有3个功能，也就是在app轻应用有3个入口，每个功能下有大约10个页面，这时候总共就有30个路由，放在一起不好维护

简单来说就是很多路由在一个文件里不好维护，分成多个，最后
export default [...app1,...app2, ...error]

2. 环境变量区分，打包命令

使用场景：比如同一套代码库，要在2个平台上使用， 后端接口域名或者主题等有一些区别，大体上的业务逻辑等都是一样的， 就可以使用

//.env.dev （根目录下）
NODE_ENV='development'
VUE_APP_API_PREFIX=prefix

"build:prefix": "vue-cli-service build --mode dev"

上面两个不详细介绍了，需要的时候你自然就会了
这里主要说下axios二次封装

3. axios二次封装

作用： 统一处理，

api.js

//后端接口
export default {
    getuserid:'/v2/userid',
    getList: '/secdist/money/list',
}

proxy_axios.js

• 这里使用的是钉钉的api，你也可以使用element-ui等组件样式库，也可以自己开发， 总之只是需要一个loading 和弹窗的样式而已
• 通过process.env.NODE_ENV判断现在是生成还是测试环境，然后给config 的baseURL赋值
• 可以通过 process.env.VUE_APP_API_PREFIX 获得不用平台的前缀
• 每个接口都有的可以种在请求头里，比如权限这种
• 不需要的种请求头的可以在拦截器中 includes 排除掉
• 这里统一处理了loading 和报错信息，组件内就不需要写了

import axios from 'axios'
import api from './api'   // 路由
import utils from '../utils.js' //弹窗
import * as dd from 'dingtalk-jsapi'; // 此方式为整体加载，也可按需进行加载

var preName = process.env.VUE_APP_API_PREFIX || 'prefix';//接口前缀，可以默认写死，也可以根据环境区分
// var preName = prefix;
var devHost = `http://10.109.6.88:9090/${preName}`;//测试接口
var productHost = `https://xx.tt.com/${preName}`;//线上接口

const config = { //默认配置
    timout: 60000, //超时处理
    withCredentials: true,
    baseURL: process.env.NODE_ENV === 'development' ? devHost : productHost,   //请求的完整路径就是baseURL+api中的
    headers: {
        'code' :"sdsdfdfsxx"  //每个接口都需要的code可以种在请求头里
    }
}
const instance = axios.create(config); // 创建实例设置默认配置

// 配置请求拦截
instance.interceptors.request.use(async config => {
    dd.device.notification.showPreloader(); // showLoading
    if (!config.url.includes('/v2/userid')) {
        const _code = (await dd.util.domainStorage.getItem({name: '_code'})).value;//钉钉的取storage是异步的，需要等待，这里就不try catch了
        config.headers['code'] = _code;
    }
    return config
}, error => {
    setTimeout(() => {
        dd.device.notification.hidePreloader();
    }, 3000)
    return Promise.reject(error)
})
// 配置相应拦截
instance.interceptors.response.use(response => {
    dd.device.notification.hidePreloader();
    setTimeout(() => {
        if (response.data.errcode === 500) {
            utils.dingToask(response.data.data)
        }
        if (response.data.errcode === 505) {
            window.location.href = window.location.origin + '/error/noAuthority'
        }
        if (response.data.errcode === 400) {
            utils.dingToask(response.data.data)
        }
    }, 1000)
    return response
}, error => {
    setTimeout(() => {
        dd.device.notification.hidePreloader();
        utils.dingToask('错误信息' + error.response.status + ':' + error.response.data.message)
    }, 1000)
    return Promise.reject(error)
})

export default {
    get(url, obj) {
        return instance.get(api[url], {
            params: obj
        })
    },
    post(url, obj) {
        return instance.post(api[url], obj)
    }
}

main.js

import $axios from './assets/js/axios/proxy_axios'
Vue.prototype.axios = $axios

home.vue

this.axios.get('getuserid',{id:'123'}).then(res=>{}).catch(()=>{})