React中使用axios、fetch-jsonp请求数据

一、使用axios

1. 安装axios：

cnpm install axios --save

2. 导入axios：

在哪里使用，在哪里导入

 import axios from 'axios'

3. 请求数据：

（1）请求本地json文件

方式1：
项目目录如下：

Axios.jsx：

import React from 'react'
//引入axios插件
import axios from 'axios'

class Axios extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    //渲染完成的生命周期
    componentDidMount(){
        //异常处理  抓异常
        try{
            //react加载本地json文件，需放在public文件里   端口号为http://localhost:3000/   页面加载出来为首页
            axios.get("list.json").then((res)=>{
                console.log(res);
            });
        }
        catch(err){
            throw err;
        }
    }
    render() {
        return (
            <div></div>
        );
    }
}

export default Axios;

注：react加载本地json文件，需放在public文件里

方式2：在mock里挂载
项目目录如下：

mock.jsx：

import Mock from 'mockjs'

//加载本地数据
import listinfo from './list.json'

//使用Mock里的mock方法  拦截ajax请求
Mock.mock("/list","get",{
    'result':listinfo
});
export default Mock;

（2）请求远程文件
Axios.jsx：

import React from 'react'
import axios from 'axios'

class Axios extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    componentDidMount(){
        let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
        //里面是用this  注意this的指向
        axios.get(api).then((res)=>{
            console.log(res);
        }).catch(function(res){
            console.log(res);
        });
    }
    render() {
        return (
            <div>请求服务器的数据</div>
        );
    }
}

export default Axios;

axios 插件用法：https://www.npmjs.com/package/axios

二、使用fetch-jsonp

1. 安装fetch-jsonp：

cnpm install fetch-jsonp--save

2. 导入fetch-jsonp：

在哪里使用，在哪里导入

 import fetchjsonp from 'fetch-jsonp'

3. 请求数据：

请求远程文件
例1：以简单的方式获取JSONP
Fetchjsonp .jsx：

import React from 'react'
import fetchjsonp from 'fetch-jsonp'
class Fetchjsonp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    componentDidMount(){
        let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
        fetchjsonp(api).then((res)=>{
            //这里对数据进行操作   默认的
            return res.json();
        }).then((res)=>{
            console.log(res);
        }).catch((err)=>{
            console.log(err);
        });
    }
    render() {
        return (
            <div>

            </div>
        );
    }
}

export default Fetchjsonp;

例2：设置JSONP回调参数名称，默认为’回调’

componentDidMount(){
        let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
        fetchjsonp(api,{
            jsonpCallback:"custom_callback"
        }).then((res)=>{
            return res.json();
        }).then((res)=>{
            console.log(res);
        }).catch((err)=>{
            console.log(err);
        });
    }

例3：设置JSONP回调函数名称，默认为带json_前缀的随机数

componentDidMount(){
        let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
        fetchjsonp(api,{
            jsonpCallbackFunction:" function_response"
        }).then((res)=>{
            //这里对数据进行操作   默认的
            return res.json();
        }).then((res)=>{
            console.log(res);
        }).catch((err)=>{
            console.log(err);
        });
    }

fetch-jsonp 官网用法：https://www.npmjs.com/package/fetch-jsonp