react实现axios

打开项目的根路径，运行npm install axios --save
这个一般安装起来很慢，一般使用cnpm install axios --save
在哪里使用就在哪里引用
import axios from 'axios'

代码如下：

import React,{Component} from 'react';

import axios from 'axios';

 

class Axios extends Component{

    constructor(props){

        super(props);

        this.state={

               list:[]

        };

    }

 

    getData=()=>{

       //通过axios获取服务器数据

       alert("执行") 

       // Make a request for a user with a given ID

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

      axios.get(api)

      .then( (response)=> {

        // handle success

          console.log(response.data.result);

          //用到this要注意this指向

          this.setState({

              list:response.data.result

          })

       

         })

         .catch(function (error) {

            // handle error

            console.log(error);

          })

    }

 

    render(){

        return(

            <div>

            <h2>axios获取服务器数据</h2>

            <button onClick={this.getData}>获取服务器api接口数据</button>

            <hr/>

            <ul>

                {

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

                        return <li key={key}>value.title</li>

                    })

                }

               

            </ul>

 

            </div>

        )

    }

  

}

 

export default Axios;

但是这个axios使用并不是很友好，下文使用的是fetch-jsonp