前言
在 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
安装完 <