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

一、使用axios

  1. 安装axios:
cnpm install axios --save
  1. 导入axios:

在哪里使用,在哪里导入

 import axios from 'axios'
  1. 请求数据:

(1)请求本地json文件

方式1
项目目录如下:
在这里插入图片描述
Axios.jsx:

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

class Axios extends React.Component {
    //渲染完成的生命周期
    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;

Axios.jsx:

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

class Axios extends React.Component{
    componentDidMount(){
        try{
            axios.get("/list").then((res)=>{
                console.log(res);
            });
        }catch(err){
            throw err;
        }
    }
    render(){
        return (
            <div></div>
        )
    }
}

export default Axios

(2)请求远程文件

Axios.jsx:

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

class Axios extends React.Component {
    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

  1. axios中可进行传值,模拟后台数据进行修改
  • params进行传参,mock中可以进行接收,路径上就能读出来

Axios.js:

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

class Axios extends React.Component {
    componentDidMount(){
        axios.post("/home",{
            params:{
                id:1
            }
        }).then((res)=>{
            console.log(66);
        });
    }
    render() {
        return (
            <div>请求服务器的数据</div>
        );
    }
}

export default Axios;

mock.js:

import Mock from 'mockjs';
var data=[];

//方法里可以接收请求传过来的参数,根据接收到的值可以将原数据的值(定义的data)进行修改
Mock.mock("/home",(res)=>{
    console.log(JSON.parse(res.body).params.id);
});
export default Mock;

二、使用fetch-jsonp

  1. 安装fetch-jsonp:
cnpm install fetch-jsonp--save
  1. 导入fetch-jsonp:在哪里使用,在哪里导入
 import fetchjsonp from 'fetch-jsonp'
  1. 请求数据:请求远程文件

例1:以简单的方式获取JSONP

Fetchjsonp .jsx:

import React from 'react'
import fetchjsonp from 'fetch-jsonp'
class Fetchjsonp extends React.Component {
    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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值