前言

在 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  

安装完 axios 后,在需要使用请求数据的文件最上面,引入 axios 库,如下代码所示,下面是上面示例 API 的具体代码

 import React, { Fragment, Component } from 'react';

import ReactDOM from 'react-dom';

import axios from 'axios'; // 引入axios库

import './style.css';

class List  extends  Component {

 constructor(props) {

 super(props);

 this.baseUrl = '/api/goodlist'; // 这里是本地模拟,在public下创建一个api文件,放置一个json文件，这里的路径直接是根路径即可,react会自动的找到这个目录

 // this.baseUrl = '#39;; // 这种方式是使用代理的方式,这里用的是mockoon工具

 // this.baseUrl = '#39;; //这是使用easy-mock

 this.state = {

 list: [],

 };

 }

 render() {

 const { list } = this.state;

 return (

 <Fragment>

 <ul>

 {list.map((item) => {

 const isRed = item.price >= 10 ? 'red' : '';

 return (

 <li key={item.id}>

 {item.name}-<span className={isRed}>{item.price}￥</span>-

 {item.address}

 </li>

 );

 })}

 </ul>

 </Fragment>

 );

 }

 // Ajax请求放在componentDidMount生命周期内

 componentDidMount() {

 // 使用axios完成ajax数据请求

 axios

 .get(this.baseUrl)

 .then((res) => {

 const { goodlists } = res.data;

 this.setState({

 list: goodlists,

 });

 })

 .catch((err) => {

 console.log(err);

 });

 }

}

const container = document.getElementById(' root ');

ReactDOM.render(<List />, container);  

上面的代码就是在 componentDidMount 中发起 Ajax 请求,用 axios 请求数据

拿到数据后,然后通过 setState 去更新组件的 state 的数据渲染到页面上

同时,当价格大于 10 时,进行了一些逻辑判断,让价格大于 10 的变红色,在 JSX 里面是可以插值表达式的方式进行一些特殊处理的

注意:本地模拟数据的 json 文件(这里是 goodlist.json ),放置的位置只能是放置在根目录 public 目录文件夹下,若放置在其他处,是不起作用的

之所以放在 public 能起作用,访问的路径直接是根路径即可, webpack 做了一些处理, react 会自动的找到这个目录

• 方式二:使用浏览器内置的 fetch 方法

该方法是浏览器标准的一个接口,提供了一种简单合理的方式来跨网络异步的获取资源数据,现在也是越来越流行使用的,同样 Ajax 请求也是放在 componentDidMount 组件挂载完之后进行数据请求,如下代码所示

 componentDidMount(){

 // 使用fetch,这里的地止换成上面的this.baseUrl也是可以的

 fetch('/api/goodlist')

 .then(res => res.json())

 .then((result) => {

 console.log(result);

 const { goodlists } = result;

 this.setState({

 list: goodlists

 })

 },

 // 注意在这里处理错误时,与axios有些区别,不是用catch()去捕获错误,因为使用catch去捕获异常会掩盖掉组件本身可能产生的bug

 (error) => {

 console.log(error);

 }

 )

 }  

上面使用的是 fetch 的方式请求数据, fetch 是前沿的标准,它是 Ajax 的替代品,它的 API 是基于 Promise 设计的,旧版本的浏览器不支持 fetch ,需要用 polyfill es6-promise

具体更详细的 fetch 使用,可参照 MDN 文档的

• 方式三:使用 JQ 的 Ajax
• jquery 是一个库,在 React 中你想要用时,得先安装,使用该方法请求数据不是不可以,但是不推荐

 npm install -S jquery

或者

cnpm install -S jquery  

然后在你需要请求数据的文件处,引入 jquery

 import $ from 'jquery';  

然后在 componentDidMount 生命周期函数内,使用 jquer 请求数据的方法，下面以 $.get() 为例, $ 至于 $.post() , $.ajax() 使用方式可自行查阅的

 componentDidMount(){

 /*

 $.get('/api/goodlist', function(res){

 console.log(res);

 this.setState({

 list: res.goodLists

 })

 }.bind(this)) // 这里必须手动绑定this

 */

 // 等价于下面的,如果不手动绑定,可以使用箭头函数,避免this的绑定

 $.get('/api/goodlist', (res) => {

 console.log(res);

 const { goodlists } = res;

 this.setState({

 list: goodlists

 })

 })

 }  

上面是使用 jquery 中提供的方法 Ajax 请求数据,我们只需要请求一数据,但却要把整个 jquery 库都给引入进来,这个按照当今的按需加载模块化开发的话，是非常不合理的，于是就有了 fetch ,和 axios 的解决方案

在 React 中推荐使用 axios 或者 fetch 的方式进行 Ajax 请求数据

• 方式四:使用 request 库 :

这个不仅仅是在 Vue , React 等框架中使用,在微信小程序里 Ajax 请求数据也是支持的

这个 request 模块也是非常流行和好用的,在这里不提一下,都觉得埋没了的

使用时,先要安装 request 模块然后在安装 request-promise 模块,因为 request-pormise 是依赖于 request ,所以两个依赖都得依次安装

 npm install -S request

npm install -S request-promise  

然后在你需要使用请求数据的文件上方引入 request-promise 库,调用一个 rp 函数

 import rp from 'request-promise';  

然后在 componentDidMount 内进行 Ajax 的数据请求,如下代码所示

 componentDidMount(){

 // 使用request-promise请求数据

 // 注意这里的this.baseUrl不支持/api/goodlist.json方式,下面的this.baseUrl是以及真实的地止,都是可以的

  rp (this.baseUrl)

 .then(res => {

 // 这里要注意的是res返回的是一个 字符串 ,需要用JSON.parse()方法将字符串转化为json对象

 const { goodlists } = JSON.parse(res);

 this.setState({

 list: goodlists

 })

 })

 .catch(error => {

 console.log(error);

 })

 }  

上面是使用 request-promise 的方式实现 Ajax 数据的请求也是可以的,注意使用该方式时,无法使用本地 mock 数据的

它也是支持 promise 对象,注意,当返回成功的 response 的类型是一个 json 字符串格式,你需要用 JSON.parse() 的方式

将 json 字符串,转化为 json 对象,然后做处理的

如果你是使用 axios 的方式请求数据,那么是不用进行 json 序列的格式化的

小结

在 React 中请求数据的几种方式

• axios (普遍常用)
• fetch 方法(尝鲜,显逼格用)
• jquery Ajax (不推荐使用)
• request (常用,仅次于 axios 使用频率)

注意:都是放在 componentDidMount 函数中进行数据请求的

在本地的 public 目录下 mock 本地数据

这种方式比较简单,直接在工程 public 目录下创建一个 api 文件夹,新建一个 json 文件就可以了

若使用 axios 进行数据的请求,或者 fetch 的方式, url 以反斜杠 / 开头就可以了,如上示例代码所示,但是若是 request 的方式， url 写成反斜线/的方式是不生效的

使用 request 的方式,需要带上 http 协议,它也支持线上接口

若是遇到跨域问题,在请求头 headers 中,添加 Access-Control-Allow-Origin: * 即可

这个我们在稍后的 mockoon 工具中会介绍到

 react-ajax

├── package- lock .json

├── package.json

├── public // 在该目录下创建一个api文件夹,把需要的模拟的数据放在一个json文件即可

│ ├── api

│ │ └── goodlist.json

│ ├── favicon.ico

│ ├── index.html

│ └── manifest.json

├── README.md

├── src

│ ├── App.js

│ ├── index.js

│ └── style.css

└── yarn-error.log  

使用 charles 抓取本地化模拟数据

charles 是一款代理服务器,通过将自己设置成系统的网络访问代理服务器,然后截取请求和请求结果达到分析 抓包 的目的,该软件是用 Java 写的,安装 charles 的时候,先要装好 Java 坏境,也就是 Jdk 坏境的设置

下面就来看看 charles 的简单具体使用

先百度百科 charles 下载该工具,下一步,下一步安装就好,当然你在后台回复【 charles 下载】也是获取到的

使用方式如下所示:

注意： charles 的 port 端口号与 React 本地启动的服务端口号一致即可

在你没有配置 charles 工具代理服务时,若该假数据的文件放置在项目根目录 public 之外,这时请求 url , /api/goodlist 是会报错的

换而言之,假数据放置在 public 目录下,不使用 charles 等其他代理工具，也能成功,因为在 React 中的 webpack 自动的帮你处理了,会自动的找到 public 目录下的文件

当然除了 charles 还有 mockoon 等其他一些工具的

使用 mockoon 进行 mock 本地数据

使用该方式时,需要你去官方下载 mockoon 工具,当然你若懒于 百度 谷歌,你在后台回复【mockoon】,这里我只提供了 windows 版本的, linux 与 Mac 用户可自行解决

mockoon 配置如下所示

使用 Easy Mock 伪造数据

Easy Mock 这是 大搜车 技术团队一个开源伪造数据的工具,是一个可视化，并且能快速生成模拟数据的持久化服务

easy-mock 结合了 mock.js ,支持接口代理, Restful 风格等非常好用的功能

把上面代码中的 baseUrl 换成线上 easy-mock 的就可以了

 this.baseUrl =

 '#39;;  

至于更多 easy-mock 工具的使用,自己可以多试一试的,有了它,就可以不依赖后端接口了,等后端接口弄好了,直接替换就可以了的

小结

mock 本地数据的几种方式

• 在本地的 public 目录下 mock 本地数据(最简单粗暴,常用)
• 使用 charles 抓取本地化模拟数据
• 使用 mockoon 进行 mock 本地数据
• 使用 easy-mock 伪造接口数据(推荐多用)

结语

本文主要讲解了 React 中如何发送 Ajax 请求,其中发送请求放置的地方应当在 componentDidMount 组件挂载完这个生命周期内,而发送 Ajax 的方式有 axios , fetch , Jquery Ajax ,以及 request 的方式,其中 axios 与 fetch , request 是主流的方式

同时介绍了在项目的根目录 public 文件夹下放置模拟的假数据,个人觉得这个很简单粗暴,但是唯一不足是你得自己手动的编写数据

而利用 charles 和 mockoon 工具拦截本地的请求,mock 数据,需要你额外的配置一下的

当然最后介绍了 easy-mock 这个非常好用的模拟后端假数据的工具

以上的代理数据模拟手段选择其中一种自己喜欢的就可以了,工具无好坏之分,自己用的爽就可以,不过个人推荐使用 easy-mock ,但是其他方式也不赖,要是不是线上的,断网了

那么其他方法就比较适用了，之所以介绍了不同的工具,主要是开拓自己的思路

这个工具用得不爽,就用另外一个的,总有一个适合自己的