React学习第五天（发布订阅-fetch的使用-跨域配置）1.代理配置 1.配置一个代理直接在package.jso

1.代理配置

1.配置一个代理

直接在package.json里面添加
```
"proxy":"http://localhost:5000"
```
说明：
- 优点：配置简单，前端请求资源时可以不加上任何前缀
- 缺点：不能配置多个代理
- 工作方式：上述方式配置代理，当请求3000不存在的资源时，那么请求会转发给5000(优先匹配前端资源)

配置多个代理

第一步：创建一个代理配置文件

在src下面创建配置文件 src/setupProxy.js

编写setupProxy.js配置具体代理规则

const proxy = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    // 配置多个代理
    proxy("/api1", { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
      target: "http://localhost:5000", //请求转发给谁(配置转发目标地址，可以返回数据的服务器地址)
      changeOrigin: true, //控制服务器收到的请求头中Host的值()
      pathRewrite: { "^/api1": "" }, //去除请求前缀，保证交给服务器的是正常请求的地址(必须配置)
      /*
      changeOrigin: true 服务器收到的请求中的host为：localhost：5000
      changeOrigin: false 服务器收到的请求中的host为：localhost：3000
      changeOrigin默认时为false ，但一般设置为true
      */
    }),
    proxy("/api1", {
      target: "http://localhost:5000",
      changeOrigin: true,
      pathRewrite: { "^/api1": "" },
    })
  );
};

说明：

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

2.消息订阅--发布机制

PubSub JS

特点：

先订阅再发布(理解：有一种隔空传话的的感觉)
适用于任意组件通信
要在组件componentWillUnmount中取消订阅

// 页面引入
import PubSub from "pubsub-js";

在需要发送数据的组件里面添加发布

 // 谁发送消息谁发布 谁接收消息谁订阅订阅消息的组件需要在组件卸载的时候取消订阅
    PubSub.publish("getData", { name: "父组件发送的数据" });

组件接收数据添加订阅

componentDidMount() {
    this.token = PubSub.subscribe("getData", (_, data) => {
      console.log(data, "组件收到数据了data");
    });
  }

取消订阅

//组件将要销毁的时候取消订阅
  componentWillUnmount() {
    PubSub.unsubscribe(this.token);
  }

3.fetch发送请求（关注分离的设计思想）

jquery,axios都是基于xhr(XMLHttpRequest)封装的库.而fetch无需引入库可以直接使用。

特点：

原生函数不再使用xmlhttprequest对象提交ajax请求
老版本浏览器可能不支持

使用方式：

fetch(url)
      .then((res) => {
        console.log("联系服务器");
        return res.json();
      })
      .then((res) => {
        console.log("接收的数据信息", res);
        // return new Promise(()=>{}) // 可以终止执行 返回错误信息
      })
      .catch((error) => {
        console.log(error, "错误信息");
      });

优化版本：

try {
      const res = await fetch(url);
      const data = await res.json();
      console.log(data, "接收的数据信息");
    } catch (error) {
      console.log(error);
    }