一、理解
1、前置说明
1、React 本身只关注于界面,并不包含发送 ajax 请求的代码
2、前端应用需要通过 ajax 请求于后台进行交互(json 数据)
3、React 应用中需要集成第三方 ajax 库(或自己封装)
2、常用的 ajax 请求库
1、jQuery:比较重,如果需要另外引入不建议使用
2、axios:轻量级,建议使用
1)封装 XmlHttpRequest 对象的 ajax
2)promise 风格
3)可以用在浏览器端和 node 服务器端
浏览器插件推荐
FeHelper(前端助手):JSON 自动格式化,手动格式,支持排序、解码、下载等等
二、axios
1、跨域实际上是请求发出了,但是没有接收到数据。使用代理服务器进行解决
2、React 脚手架配置代理
2.1 前端项目在 package.json 中的文件添加配置,可以解决跨域
“proxy”: “http://localhost:5000”
说明:
- 优点:配置简单,前端请求资源时可以不加任何前缀
- 缺点:不能配置多个代理
- 工作方式:上述配置代理,当请求了 3000 不存在的资源时, 那么该请求会转发给 5000 (优先匹配前端资源)
2.2 方式二
2.2.1 第一步:创建代理配置文件
在 src 下创建配置文件: src/setupProxy.js
2.2.2 编写 setupProxy.js 配置具体代理规则:
changeOrigin 设置为 true 时,服务器收到的请求头中的 host 为:localhost:5000
changeOrigin 设置为 false 时,服务器收到的请求头的 host 为:localhost:3000
changeOrigin 默认值为 false,但我们一版将 changeOrigin 值设为 true
// 配置多个代理
// react 脚手架直接下载好了中间件
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
proxy('/api1', {
// 遇见 api1 前缀的请求,就会触发该代理配置
target: 'http://localhost:5000', //请求转发给谁
changeOrigin: true, // 控制服务器受到的响应头中 Host 字段的值。请求时哪里发出来的
pathRewrite: { '^/api1': '' }, // 重写请求路径
}),
// proxy('/api2', {
// target: 'http://localhost:5001',
// changeOrigin: true,
// pathRewrite: {'^/api2': ""}
// })
)
}
说明:
- 优点:可以配置多个代理,可以灵活的控制请求是否走代理
- 缺点:配置繁琐,前端请求资源时必须加前缀
2.3 服务端修改
安装依赖
npm i cors
使用,然后进行相关配置即可
const cors = require(“cors”)
app.use(cors())
3、文档
https://github.com/axios/axios
4、例子:github 搜索
4.1 解构赋值写法复习
4.1.1 常规写法
let { value } = this.keywordElement
4.1.2 连续写法, 没有定义 keywordElement,只定义了 value
let {
keywordElement: { value },
} = this
4.1.3 连续写法,并且将原来变量重命名
let {
keywordElement: { value: keyword },
} = this
4.2 兄弟组件之间的传值通信
4.2.1 消息订阅-发布机制(适用任意组件间的通信)
1、工具库:PubSubJS
2、下载: npm i pubsub-js --save
3、使用:
1)import PubSub from “pubsub-js” // 引入
2)PubSub.subscribe(‘delete’, function(msgName,data){console.log((msgName,data))});//订阅, 组件挂载后就可以订阅
3)PubSub.publish(‘delete’, data);// 发布消息
List 组件挂载时订阅消息,只要有发布消息就更新状态数据
4.3 fetch 发送请求
window 对象内置的对象
优势:不是第三方库,不需要安装,只要有浏览器就可以使用,也是 Promise 风格的
4.3.1 文档
https://segmentfault.com/a/1190000003810652
4.3.2 特点
1、fetch:原生函数,不再使用 XmlHttpRequest 对象提交 ajax 请求
2、老版本浏览器可能不支持
4.3.3 相关 API
1)GET 请求:
fetch(url)
.then(function (response) {
return response.json()
})
.then(function (data) {
console.log(data)
})
.catch(function (e) {
console.log('Oops, error')
})
4.4 github 搜索案例和相关知识点
4.4.1 设计状态时要考虑全面,例如带有网络请求的组件,要考虑请求失败怎么办
4.4.2 ES6 小知识点:解构赋值+重命名
let obj = {a:{b:1}}
const {a} = obj // 传统解构赋值
const {a:{b}} = obj // 连续解构赋值
const {a: {b:value}} // 连续解构赋值+重命名
4.4.3 消息订阅与发布机制
1、先订阅,再发布(理解:有一种隔空对话的感觉)
2、适用于任意组件间通信
3、要在组件的 componentWillUnmount 中取消订阅
4.4.4 fetch 发送请求(关注分离的涉及思想)
try {
const response = await fetch('xxx')
const data = await response.json()
console.log(data)
} catch (error) {
console.log('请求出错', error)
}