React 學習筆記 (五)(獲取伺服器API介面資料:axios、fetchJSONP)
阿新 • • 發佈:2018-11-07
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> ) } }