版权声明:未经允许,不可以转载哦~ https://blog.csdn.net/qq_39242027/article/details/83747581
axios
1.安装 axios模块
npm install axios --save
2.引用 哪里使用引哪里
import axios from 'axios'
3.使用
import React, { Component } from 'react';
import axios from 'axios';
export default class Axios extends Component {
constructor(props){
super(props);
this.state={
list1:[],
}
}
getDataA=()=>{
axios.get('http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20')
.then((res)=>{
// 注意this指向
this.setState({
list1:res.data.result
})
})
.catch((err)=>{
console.log(err)
})
}
render() {
return (
<div>
<button onClick={this.getDataA}>axios获取数据</button>
<ul>
{
this.state.list1.map((value,key)=>{
return (<li key={key}>{value.title}</li>)
})
}
</ul>
</div>
)
}
}
fetchJSONP
1.安装 fetchJSONP模块
npm install fetch-jsonp --save
2.引入 哪里使用引哪里
import fetchJsonp from 'fetch-jsonp'
3.使用
import React, { Component } from 'react';
import fetchJsonp from 'fetch-jsonp';
export default class FetchJSONP extends Component {
constructor(props){
super(props);
this.state={
list2:[]
}
}
getDataF=()=>{
fetchJsonp('http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20')
.then((res)=>{
return res.json()
})
.then((json)=>{
this.setState({
list2:json.result
})
})
.catch((ex)=>{
console.log('parsing failed',ex)
})
}
render() {
return (
<div>
<button onClick={this.getDataF}>fetchJSONP获取数据</button>
<ul>
{
this.state.list2.map((value,key)=>{
return (<li key={key}>{value.aid}</li>)
})
}
</ul>
</div>
)
}
}