(十一)React获取数据axios插件fetch-jsonp插件使用

–react获取服务器API接口的数据:

react中没有提供专门的请求数据的模块,但是我们可以使用第三方请求数据模块实现请求数据

• –1 axios https://github.com/axios/axios axios的作者感觉jsonp不太友好,推荐CORS
  方式更为干净(后端运行跨域)

• –2 fetch-jsonp https://github.com/camsong/fetch-jsonp

• –3 其他请求数据的方法也可以…自己封装模块用原生js实现数据请求也可以…

–远程测试API接口:

get请求:

jsonp请求地址:

---

---

axios使用

--安装axios:

--cnpm install axios --save     --save表示将模块写入配置文件
或者
npm  install  axios   --save

--引入axios

import axios from 'axios'

--使用axios

import React,{Component} from 'react';
import axios from 'axios';

class Axios extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }

    getData=()=>{
        //通过axios获取服务器数据
        var api = "http://127.0.0.1:8888/hello";
        axios.get(api)
        .then(function(response){
            console.log(response);
        })
        .catch(function(error){
            console.log(error);
        });
    }
    render() {
        return (
            <div>
                <h2>获取服务器数据</h2>

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

export default Axios;

jsonp方式

比较常用的就是axios的方式, 不过jsonp的使用也类似, 也是这么几步骤

--安装fetch-jsonp

npm install fetch-jsonp --save

--引入模块

import FetchJsonp from 'fetch-jsonp';

--使用

略