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

安装完 <

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值