目录结构 单页文件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
}),
)
}复制代码
最后效果
标签:jQuery,axios,isLoaded,React,records,state,error,response From: https://blog.51cto.com/u_12422954/5986023