React 学习笔记 （五）（获取服务器API接口数据：axios、fetchJSONP）

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>
        )
    }
}