jsonp react 获取返回值_Reactjs之Axios、fetch-jsonp获取后台数据

本文介绍了在React应用中如何利用Axios和fetch-jsonp库来获取JSONP数据。Axios虽然不直接支持JSONP,但可以使用CORS解决跨域问题。fetch-jsonp则是专门用于JSONP请求的库,通过安装和引入,然后按照文档进行调用,可以方便地获取JSONP数据。示例中提供了API接口的GET请求和JSONP请求的URL。
摘要由CSDN通过智能技术生成

/**

Axios获取服务器数据(无法跨域,只能让后台跨域获取数据)

react获取服务器APi接口的数据:

react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据

axios介绍:https://github.com/axios/axiosaxios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域)

1、安装axios模块npm install axios --save / npm install axios --save

2、在哪里使用就在哪里引入import axios from 'axios'

3、看文档使用

var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';

axios.get(api)

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

2、fetch-jsonphttps://github.com/camsong/fetch-jsonpfetch-jsonp请求:返回url会带回一个callback=

1、安装 npm install fetch-jsonp --save

2、import fetchJsonp from 'fetch-jsonp'

3、看文档使用

fetchJsonp('/users.jsonp')

.then(function(response) {

return response.json()

}).then(function(json) {

console.log('parsed json', json)

}).catch(function(ex) {

console.log('parsing failed', ex)

})

4、其他请求数据的方法也可以...自己封装模块用原生js实现数据请求也可以...

远程测试API接口:

get请求:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20

jsonp请求地址:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&callback=?*/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值