React 使用axios和fetch-jsonp拦截ajax请求

一、mock模拟数据

Mock.js 生成随机数据,拦截 Ajax请求 实现 前后端分离 

• 1.安装mockjs

cnpm install mockjs --save 

 

•  2.建mock.js的文件，配置模拟数据

import Mock from "mockjs";

//使用MOCK 里面的mock方法   拦截ajax请求
//加载本地数据

//导入json文件
import list from "./list.json";

//自己写入数据
Mock.mock("/user","get",{
   result: {

   }
});

Mock.mock("/list","get",{
       result: list
    });
  
export default Mock;

 

• 3.使用mockjs，在 index.js里面引入

require("./Mock/Mock");

二、axios请求数据

三种方式：

1. 请求mock中的数据
2. react加载本地json文件 放在public文件
3. 将本地的json文件放在Mock目录中,并导入mock

import React,{Component} from "react";

//在哪使用在哪安装插件
import axios from "axios";
class Axios extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }

       //渲染完成的声明周期
       componentDidMount(){
  
        //1. 请求mock中的数据
        axios.get("/user").then((res)=>{
            console.log(res.data.result);
          })

        // 2. react加载本地json文件  放在在public文件   http://localhost:3000/
           axios.get("static/data/list.json").then(res=>{
                //index.htm 与state 同级
            console.log(res);
           })

       //3. 将本地的json文件放在Mock目录中,并导入mock
           axios.get("/list").then(res=>{
            console.log(res);
           })
           .catch(()=>{
              console.log("error)
           })  
       }
       
    render() {
        return (
            <div>
                {/* 获取本地json文件 */}
                axios
            </div>
        );
    }
}

export default Axios;

三、fetch-jsonp获取数据

支持跨域

import React, { Component } from 'react';  

import fetch from 'fetch-jsonp'
class Fectchjsonp extends Component {
    constructor(props) {
        super(props);
        this.state = { 

         };
    }
    componentDidMount(){
        //jsonp  跨域
        let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
        fetch(api).then((res)=>{
            return res.json();
        }).then((res)=>{
            console.log(res);
        }).catch((err)=>{
            console.log(err);
        })
    }
    render() {
        return (
            <div>
                fetch-jsonp
            </div>
        );
    }
}

export default Fectchjsonp;