前言
在 React
中,render
函数返回的结果,取决于组件的 props
和 state
css
咱们都知道 UI
页面上的数据不是写死的,每每是从后端的数据接口中拿到的html
而后将真实的数据填充到页面上 ,那么应该在哪一个生命周期函数中发起请求?java
又如何发起 Ajax
请求呢以及有哪些方式? 以及咱们怎么样模拟一个后端数据接口?react
示例API
返回以下json
对象
假如后端返回的商品列表以下所示jquery
{ "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
文件夹内linux
在public
目录下的api
文件夹下均可以放置你本身模拟的数据,该模拟的数据文件只能放置在public
目录下,不然就会报错,不生效的webpack
对应的 UI
效果显示:以下所示ios
固然对于 UI
以什么样的方式来显示,你本身能够用 css
进行控制的,这并非文本的重点git
在哪一个生命周期函数中发送 AJax 请求
把Ajax
请求放在componentWillMount
组件即将被挂载的函数中也是能够的es6
可是官方推荐放在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
的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
请求数据
这个不只仅是在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是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
这是大搜车技术团队一个开源伪造数据的工具,是一个可视化,而且能快速生成模拟数据的持久化服务
官网地止: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
,可是其余方式也不赖,要是否是线上的,断网了
那么其余方法就比较适用了,之因此介绍了不一样的工具,主要是开拓本身的思路
这个工具用得不爽,就用另一个的,总有一个适合本身的