项目中对于axios的封装使用

在vue的项目中以前是使用vue-resource来请求数据,随着vue2的使用官方推荐使用axios,首先看看npm给出的axios定义以及兼容性:


在使用之前需要安装axios,在项目的根目录下打开命令窗口输入一下代码安装axios:

npm install axios

get方式使用:

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post方式使用:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post方式我在使用的过程中遇到了点小问题,就是后台一直拿不到我传递的数据,后来通过一下方法解决:

var params = new URLSearchParams();
    params.append('activityId', this.activityId);
    axios.post(this.HOST + '/enterReceivePage',params).then(res => {
        var obj = JSON.parse(res.data);
        this.hbinfo = obj.data;
    })

就是需要将传递的参数通过urlsearchparams传递后台才能接受,后台使用的是java开发的api。

配置的方式:

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
axios({
  method:'get',
  url:'/user',
})
  .then(function(response) {

});

还有很多restful api常用的方式如下:


请求的配置选项如下:

{
  // 请求地址
  url: '/user',
 
  // 请求方法
  method: 'get', // defa
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值