axios使用注意事项

1、在使用GET方法传递参数时使用的是params，params传参是以/user?ID=1001&name=qq形式传递的；

axios.get('/user?ID=1001')
    .then( res => {
         // 请求数据成功并返回数据。
        console.info(res)
    }).catch( e => {
        console.info(e.config)
    })
// 等同以下写法
axios({
    url: '/user',
    method: 'GET',
    params: {
        ID: 1001
    }
}).then( res => {
    console.info(res)
}).catch( e => {
    console.info(e)
})

2、使用POST时对应的传参使用的是data，data是作为请求体发送的，同样使用这种形式的还有PUT,PATCH等请求方式；

axios.post('/user', {
    firstName: 'Qi',
    lastName: 'Rong'
}).then( res => {
    console.info(res)
}).catch( e => {
    console.info(e)
})
// 等同以下写法
axios({
    url: '/user',
    method: 'POST',
    data: {
        firstName: 'Qi',
        lastName: 'Rong'
    }
}).then( res => {
    console.info(res)
}).catch( e => {
   console.info(e)
})

3、axios中POST的默认请求体类型为Content-Type:application/json，
同时，后台必须要以支持@RequestBody的形式接收参数，否则会出现前台传参正确，后台接收不到的情况；

4、POST如果想要设置类型为Content-Type:application/x-www-form-urlencoded（浏览器原生支持），axios提供了两种方式：
（1）浏览器端，并不是所有浏览器都支持URLSearchParams。

const params = new URLSearchParams();
params.append('firstName', 'Qi');
params.append('lastName', 'Rong');
axios.post('/user', params);

（2）用qs这个库来格式化数据。默认情况下在安装完axios后就可以使用qs库。

const qs = require('qs');
axios.post('/user', qs.stringify({'firstName':'Qi', 'lastName': 'Rong'}));

axios使用注意事项

推荐阅读更多精彩内容