一、理解

1、前置说明

1、React 本身只关注于界面，并不包含发送 ajax 请求的代码
2、前端应用需要通过 ajax 请求于后台进行交互（json 数据）
3、React 应用中需要集成第三方 ajax 库（或自己封装）

ajax__9">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”

说明：

1. 优点：配置简单，前端请求资源时可以不加任何前缀
2. 缺点：不能配置多个代理
3. 工作方式：上述配置代理，当请求了 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': ""}// }))
}

说明：

1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理
2. 缺点：配置繁琐，前端请求资源时必须加前缀

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)
}