React基础-React中发送Ajax请求以及Mock数据

前言

在 React 中, render 函数返回的结果,取决于组件的 props 和 state

我们都知道 UI 页面上的数据不是写死的,往往是从后端的数据接口中拿到的

然后将真实的数据填充到页面上 ,那么应该在哪个生命周期函数中发起请求?

又如何发起 Ajax 请求呢以及有哪些方式? 以及我们怎么样模拟一个后端数据接口?

示例 API 返回如下 json 对象

假如后端返回的商品列表如下所示

{

 "goodLists": [

 {"id": 1, "name": "瓜子", "price": 10, "address": "广东"},

 {"id": 2, "name": "苹果", "price": 20, "address": "北京"}，

 {"id": 3, "name": "橘子", "price": 8, "address": "湖南"}，

 {"id": 4, "name": "桃子", "price": 13, "address": "北京"},

 {"id": 5, "name": "榴莲", "price": 18, "address": "海南"}

 ]

}

把这段商品列表的 json 代码命名为 goodlist.json ,放到根目录 public 的 api 文件夹内

在 public 目录下的 api 文件夹下都可以放置你自己模拟的数据,该模拟的数据文件只能放置在 public 目录下,否则就会报错,不生效的

对应的 UI 效果显示:如下所示

当然对于 UI 以什么样的方式来显示,你自己可以用 css 进行控制的，这并不是文本的重点

在哪个生命周期函数中发送 AJax 请求

把 Ajax 请求放在 componentWillMount 组件即将被挂载的函数中也是可以的

但是官方推荐放在 componentDidMount 这个生命周期函数中发起 Ajax 请求,因为执行这个生命周期时, DOM 已经挂载完了

这样做可以拿到 Ajax 请求返回的数据并通过 setState 来更新组件

componentDidMount(){

 // 在这里进行Ajax数据请求，axios,fetch,jquery Ajax或者request都可以

}

如何发送 AJax 请求？

在 React 中,你可以使用你喜欢的 Ajax 库,例如： Axios ,浏览器内置的 feach 方法, JQuery Ajax ,或是第三方库 request ,下面就逐一来看看的

• 方式一使用 Axios 发送 Ajax 请求

该方式无论是 Vue 还是 React 甚至其他一些框架中,都普遍常用,它支持 promise 方式，在使用 axios 库之前,应该先在终端下使用 npm 或者 cnpm 全局安装一下

npm install -S axios

或者cnpm install -S axios

或者yarn add axios

安装完 <