一、React ajax
了解
React 本身只关注于界面，并不包含发送 ajax 请求的代码
前端应用需要通过 ajax 请求与后台进行交互（json 数据）
react 应用中需要集成第三方 ajax 库（或自己封装）
常用的 ajax 请求库
1、jQuery：比较重，如果需要另外引入不建议使用
2、axios：轻量级，建议使用
封装 XmlHttpRequest 对象的 ajax，promise 风格，可以用在浏览器端和 node 服务器端。
文档：https://github.com/axios/axios
安装：$ npm install axios
二、react 脚手架配置代理总结
React 项目启动以后，运行到本地 3000 端口，地址为 http://localhost:3000
请求 api 接口，接口地址为 http://localhost:5000/students | http://localhost:5001/cars
浏览器发起 ajax 请求时，会存在跨域问题
方式一
在 package.json 中追加如下配置
"proxy": "http://localhost:5000"
请求地址修改为：http://localhost:3000/students （先请求本地3000端口下的代理，通过代理转发请求到5000端口，代理再将服务端返回数据转发回来）
axios.get('http://localhost:3000/students')
说明：
1、优点：配置简单，前端请求资源时可以不加任何前缀。
2、缺点：不能配置多个代理。
3、工作方式：上述方式配置代理，当请求了 3000 不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源 public 目录下）
方法二
第一步：创建代理配置文件
在src下创建配置文件：src/setupProxy.js
第二步：编写 setupProxy.js 配置具体代理规则
// 配置代理中间件，以进行连接、表达、浏览器同步等。
const {
createProxyMiddleware } = require('http-proxy-middleware')
// 配置代理服务
const apiProxy = createProxyMiddleware('/api1', {
// api1 是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
target: 'http://localhost:5000', // 配置转发目标地址(能返回数据的服务器地址)
changeOrigin: true, // 控制服务器收到的请求头中Host的值
pathRewrite: {
// 重写请求路径(必须)，去除请求前缀，保证交给后台服务器的是正常请求地址
'^/api1': ''
}
})
const apiProxy2 = createProxyMiddleware('/api2', {
target: 'http://localhost:5001',
changeOrigin: true,
pathRewrite: {
'^/api2': ''
}
})
module.exports = function(app) {
app.use(apiProxy)
app.use(apiProxy2)
}
说明：
1、优点：可以配置多个代理，可以灵活的控制请求是否走代理。
2、缺点：配置繁琐，前端请求资源时必须加前缀。
三、消息订阅-发布机制
实现兄弟组件间通信
1、工具库：PubSubJS
2、下载: npm install pubsub-js --save
3、使用:
import PubSub from 'pubsub-js' // 引入
PubSub.subscribe('delete', function(msg, data){
}) // 订阅
PubSub.publish('delete', data) // 发布消息
PubSub.unsubscribe() // 取消订阅（类似于定时器timer）
四、扩展 Fetch
1、文档：
https://github.github.io/fetch/
https://segmentfault.com/a/1190000003810652
2、特点
fetch：原生函数，不再使用 XmlHttpRequest 对象提交 ajax 请求，支持 promise
老版本浏览器可能不支持