jsonp react 获取返回值_第11节 React获取服务器API接口数据2019-06-08

目前主要有两种方式：axios、fetch-jsonp

一、axios的使用

1.1安装

1.1.1使用NPM安装

npm install axios --save

1.1.2使用Yarn安装

$ yarn add axios

1.2引用

在哪里使用，在哪里引用

import Axios from 'axios'

1.3Axios示例

/**

* 获取服务器数据

*/

getData=()=>{

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

axios.get(api)

//.then(function (response) {

.then((response)=> {

console.log(response.data.result);

this.setState({

list:response.data.result

})

})

.catch(function (error) {

console.log(error);

});

//alert("获取服务器数据");

}

1.4DEMO示例

import React from 'react';

import 'bootstrap/dist/css/bootstrap.min.css';

import axios from 'axios';

//定义组件

class Axios extends React.Component{

constructor(props){

super(props);

this.state={

list:[]

}

}

/**

* 获取服务器数据

*/

getData=()=>{

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

axios.get(api)

//.then(function (response) {

.then((response)=> {

console.log(response.data.result);

this.setState({

list:response.data.result

})

})

.catch(function (error) {

console.log(error);

});

//alert("获取服务器数据");

}

render() {

return (

axiox获取服务器数据

获取

---

{

this.state.list.map((value,key)=>{

return

{value.title}

})

}

)

}

}

export default Axios;//导出组件

1.5官网地址

二、fetch-jsonp的使用

2.1安装

npm install fetch-jsonp

2.2引用

import fetchJsonp from 'fetch-jsonp'

2.3fetch-jsonp示例

getData=()=>{

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

fetchJsonp(api)

.then(function(response) {

return response.json()

}).then((json)=> {

this.setState({

list:json.result

})

}).catch(function(ex) {

console.log('parsing failed', ex)

})

}

2.4完整DEMO示例

import React from 'react';

import fetchJsonp from 'fetch-jsonp'

//定义组件

class Fecthjsonp extends React.Component{

//构造函数

constructor(props){

super(props);

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)=> {

this.setState({

list:json.result

})

}).catch(function(ex) {

console.log('parsing failed', ex)

})

}

render() {

return(

你好

获取数据

{

this.state.list.map((value,key)=>{

return

{value.title}

})

}

)

}

}

export default Fecthjsonp;//导出组件

2.5官网地址