关于axios以及jsonp的简单使用方法

vuejs前端框架作者推荐使用axios进行数据请求,axios的使用方法非常简单,最近在使用vuejs碰到个小问题,于是记录一下:
1.如果是npm管理前端项目的话,直接npm i axios --save-dev安装就好,如果不是,那么直接引用就行了
使用的时候在页面的script中import axios from 'axios'引入,下面是es6的函数式写法

getList: function (page, limit) {
  axios.get('/api/v1/topics', {
    params: {
      page: this.page || 1,
      tab: this.tab,
      limit: this.limit || 20
    }
  }).then((response) => {//这里使用箭头函数,那么下面的this指向就没有问题了
    const data = response.data
    if (data) {
      this.list = data
    }
  }).catch((error) => {
    console.log(error)
  })
}

2.axios不支持jsonp,因为axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净,但是jsonp支持范围更加广阔一些,一些老式的IE浏览器也能支持,所以有些公司还是jsonp用的多些,那么如果要使用jsonp,可以独立安装
npm i jsonp --save-dev 然后在页面中引用import jsonp from 'jsonp',使用方式也是非常简单的:

getList: function () {
 jsonp(config.ajaxUrl + '路径', null, (err, data) => {
   if (err) {
     console.error(err.message);
   } else {
     if (data.list.length > 0) {
       data.list.map((item) => this.list.push(item))
       console.log(data);
     }
   }
 })
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值