React 中用jQuery的ajax 和 axios请求数据

目录结构  单页文件Records.js

模拟一个mock数据：

1.https://www.mockapi.io/  可以使用github账号登陆

2.新建项目

3.我在此命名项目为accunt-app

4.填写你数据的名字

5.数据的健和类型

6.生成后可调节你想要的条数

7.可以在Data里预览数据

8.可在终端里看请求状态   API下面的那条url后面加上你的数据名

Records.js中所有内容

先说jquery的ajax：

1.项目中安装jQuery：yarn add jquery

2.引入 jquery ：import $ from 'jquery'

3.创建视图表格

4.在钩子函数componentDidMount（）中调用ajax

5.加载成功失败，state中isLoaded都是true

6.state中定义error时的状态，isLoaded加载时的状态，默认为false，和record初始化数据

成功时将state中的record赋给response数据，就是我们创建的mock数据 

7.用if  else判断视图是否正常加载，获取错误时显示给用户的内容，加载时显示给用户的内容，成功时展示给用户正常数据

import React, { Component } from 'react';

//如果只需要用jQuery来获取后端数据，别的不需要，可以按需导入,则下面使用时不用加$符号
//import {getJSON} from 'jquery';
//import $ from 'jquery'
import axios from 'axios'

class Records extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error:null,
            isLoaded:false,
            records:[]
        }
    }

    //在钩子函数中使用jQuery获取后端数据response成功则返回数据，失败返回error
    componentDidMount(){
        axios.get("https://5c407abd2928860014e07025.mockapi.io/api/v1/records")
            .then(
                response =>this.setState({
                    records:response.data,
                    isLoaded:true
                }),
            ).catch(
                error =>this.setState({
                    isLoaded:true,
                    error:error
                }),
            )
    }

    render() {
        //相当于将state中的值导出，类似于const error = this.state.error;
        const {error,isLoaded,}=this.state;
        if(error){
            return <div>
                Error:{error.message}
            </div>
        }else if(!isLoaded){
            return <div>
                Loading...
            </div>
        }else {
            return (
                <div>
                    <table className="table table-border">
                        <thead>
                        <tr>
                            <th>日期</th>
                            <th>名称</th>
                            <th>金额</th>
                        </tr>
                        </thead>
                        <tbody>
                        {this.state.records.map((record,i)=>
                            <tr key={record.id}>
                                <td>{record.date}</td>
                                <td>{record.title}</td>
                                <td>{record.amount}</td>
                            </tr>
                        )}
                        </tbody>
                    </table>
                </div>
            );
        }
    }
}

export default Records;

复制代码

axios方法 只需要将axios替换jQuery就可以

1.安装 npm install axios 或用yarn add axios

2.在需要用到的页面引入 import axios from 'axios'

3.替换jQuery请求部分 请求成功获取数据略有不同，一个直接获取response就是数据，一个要获取下面的data才能获取到数据

componentDidMount(){
    axios.get("https://5c407abd2928860014e07025.mockapi.io/api/v1/records")
        .then(
            response =>this.setState({
                records:response.data,
                isLoaded:true
            }),
        ).catch(
            error =>this.setState({
                isLoaded:true,
                error:error
            }),
        )
}复制代码

最后效果