vue中使用axios的配置

Question

vue中使用axios需要设置哪些东西，比如使用vue-resource时需要设置
Vue.http.options.emulateJSON = true
设置后chrome工具栏请求栏就是Form Date

使用axios时，默认请求时，chrome工具栏请求栏就是Request Payload,
具体怎么设置，可以让axios请求变成Form Data形式

Answer 1

• 看了你自己回答的部分，应该是对的，而且比较全。

• 我这里再补充一点，如果你想要操作方便，给所有的axios请求都使用qs.stringify()的话，可以设置axios的全局属性：

var qs = require('qs'); // ES5
// 或者ES6: import qs from 'qs';

axios.defaults.transformRequest = [function(data) {
    return qs.stringify(data)
}];
// 或者使用箭头函数
// axios.defaults.transformRequest = [data => qs.stringify(data)];

• 注意，上面例子中的函数是放在数组中的。

• 另外，根据axios文档，transformRequest是在发送数据前处理数据的配置，而axios.defaults.XXXX为axios的默认配置项。

Answer 2

import qs from 'qs'

axios.get('url', qs.stringify(params))

Answer 3

使用上面基本按文档走就没什么问题的，可以简单抽象一下。

// axios配置
function request(method, url, param, cb, errcb) {
    // token认证
    const userToken = store('userToken')
    const config = {
        url: '/api' + url,
        method: method,
        headers: {
            Authorization: userToken 
        },
        data: param
    }
    axios(config)
        .then((res) => {
            var data = res.data
            if (data.success) {
                // 请求成功
                if (cb) {
                    cb(data.model)
                }
            } else {
                // 请求错误
                console.error(data)
                if (errcb) {
                    errcb(data.msg, data.model)
                } else {
                    alert(data.msg)
                }
            }
        })
        .catch((error) => {
            console.error(error)
            alert('发生错误')
        })

}

export function post(...args) {
    request('post', ...args)
}

export function get(...args) {
    request('get', ...args)
}

至于非json/application的情况，可以转一个data

// 转换json为searchParams 支持请求application/x-www-form-urlencoded
function $stringify(param) {
    var query = []
    for (var k in param) {
        query.push(k + '=' + param[k])
    }
    return query.join('&')
}