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
            }),
        )
}複製代碼

最後效果