美文网首页
axios使用注意事项

axios使用注意事项

作者: 828a8863cef9 | 来源:发表于2018-06-01 15:49 被阅读0次

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

          本文链接:https://www.haomeiwen.com/subject/sykksftx.html