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使用注意事项)