前言
在 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 = 'http://localhost:4000/api/goodlist'; // 这种形式是应用代理的形式,这里用的是mockoon工具 // this.baseUrl = 'https://easy-mock.com/mock/5b24e12cf076d94c646a9aa2/api/googlists'; //这是应用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的Ajaxjquery是一个库,在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 库: https://github.com/request/re...
这个不仅仅是在Vue,React等框架中应用,在微信小程序里Ajax申请数据也是反对的
这个request模块也是十分风行和好用的,在这里不提一下,都感觉湮没了的
应用时,先要装置request模块而后在装置request-promise模块,因为request-pormise是依赖于request,所以两个依赖都得顺次装置
npm install -S requestnpm install -S request-promise而后在你须要应用申请数据的文件上方引入request-promise库,调用一个rp函数
import rp from 'request-promise';而后在componentDidMount内进行Ajax的数据申请,如下代码所示
componentDidMount(){ // 应用request-promise申请数据 // 留神这里的this.baseUrl不反对/api/goodlist.json形式,上面的this.baseUrl是http://localhost:4000/api/goodlist,以及实在的地止,都是能够的 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 用户可自行解决
官网地止:https://mockoon.com/
mockoon配置如下所示
应用 Easy Mock 伪造数据
Easy Mock 这是大搜车技术团队一个开源伪造数据的工具,是一个可视化，并且能疾速生成模仿数据的长久化服务
官网地止:https://easy-mock.com
easy-mock联合了mock.js,反对接口代理,Restful格调等十分好用的性能
把下面代码中的baseUrl换成线上easy-mock的就能够了
this.baseUrl = 'https://easy-mock.com/mock/5b24e12cf076d94c646a9aa2/api/googlists';至于更多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,然而其余形式也不赖,要是不是线上的,断网了
那么其余办法就比拟实用了，之所以介绍了不同的工具,次要是开辟本人的思路
这个工具用得不爽,就用另外一个的,总有一个适宜本人的