06_React ajax

一、理解

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”

说明：

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