iview中，axios怎么配置和封装，又如何调用？

Question

默认的util.js配置看不太懂，本人刚接触iview。

---

const ajaxUrl = 'http://192.168.1.230:8080/nis-service/'
这里配置了ajax前缀
util.ajax = axios.create({baseURL: ajaxUrl,timeout: 30000});
这里进行axios配置，如何调用？
我现在是直接修改vue原型链，感觉这并不是iview作者的原意，想知道应该怎么调用？
axios.defaults.baseURL = ajaxUrl;
Vue.prototype.$ajax = axios;

---

还有在util.js文件中如何封装？

Answer 1

摸索了几天，基本会用了，在这里抛砖引玉了。

配置ajaxUrl，前缀地址

const ajaxUrl = env === 'development' ?
    'http://192.168.1.230:8080/nis-service/' ://开发地址
    env === 'production' ?
    'https://www.url.com' ://发布地址
    'https://debug.url.com';//debug地址

三元选择符，配置在build/env.js中

export default "development";//development开发模式，production发布模式

配置util.ajax里的参数

util.ajax = axios.create({
    baseURL: ajaxUrl,//前缀地址
    timeout: 30000,//超时时间
    headers: {//请求头
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
    }
});

在util.js文件中引入qs

import qs from 'qs';

在util.js中创建自己的方法，以post为例

util.post = function (url, data) {
    return util.ajax({
        url,//请求地址，会加上配置的前缀地址
        method: 'post',//请求类型
        data:qs.stringify(data,{ arrayFormat: "repeat" })//这里用qs处理数据，数组转成不带下标
    })
    .then(response => {//成功
        console.log(response);
        return response;
    })
    .catch(error => {//失败
        console.log(error);
        return error;
    });
}

在需要使用的组件里引入util.js。

import util from "../../../libs/util.js";

直接使用就可以了

util.post("url",{
  key;value
})
.then(response => {
})
.catch(error => {
});

如果您有更好的封装或使用方法，请您不吝赐教，路过的大神请轻拍。

Answer 2

不错,学习啦