关于javascript:React基础9React-中发送-Ajax-请求以及-Mock-数据

6次阅读

共计 6607 个字符，预计需要花费 17 分钟才能阅读完成。

前言

在 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 的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 库: https://github.com/request/re…

这个不仅仅是在 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是支流的形式