vue中使用axios的配置

Pimi
  • 213

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

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

回复
阅读 10.7k
3 个回答
  • 看了你自己回答的部分,应该是对的,而且比较全。

  • 我这里再补充一点,如果你想要操作方便,给所有的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的默认配置项。

import qs from 'qs'

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

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

// 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('&')
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏