准备工作
Fetch-jsonp
https://github.com/camsong/fetch-jsonp
打开万能的工具包:https://www.npmjs.com
搜索fetch-jsonp
1:安装fetch-jsonp
文档上是这样写:
npm install fetch-jsonp
实际好用的命令:
cnpm install fetch-jsonp --save
2:引入
import fetchJsonp from 'fetch-jsonp';
3:看文档的示例
文档链接:https://www.npmjs.com/package/fetch-jsonp
FetchJsonp.js代码(参考代码)
import React from 'react';
import fetchJsonp from 'fetch-jsonp';
class FetchJsonp extends React.Component {
//构造函数
constructor() {
super();
//react定义数据
this.state = {
list: []
}
}
//请求接口的方法
getData = () => {
var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
fetchJsonp(api)
.then(function (response) {
return response.json()
}).then((json) => {
console.log(json);
//用到this需要注意指向,箭头函数
this.setState({
list: json.result
})
}).catch(function (ex) {
})
}
render() {
return (
<div>
<h2>FetchJsonp获取数据</h2>
<button onClick={this.getData}>获取api接口</button>
<ul>
{
this.state.list.map((value, key) => {
return <li key={key}>{value.title}</li>
})
}
</ul>
</div>
)
}
}
export default FetchJsonp;