脚手架配置代理 + 消息订阅与发布（pubsub）

脚手架配置代理

// setupProxy.js
const proxy = require('http-proxy-middleware')

module.exports = function(app){
  app.use(
    proxy('/api1',{
      target: 'http://localhost:5000',
      changeOrigin: true, // 控制服务器收到的响应头中Host字段的值
      pathRewrite:{'^/api1': ''} // 重写请求路径
    }),
    proxy('/api2',{
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite:{'^/api2': ''}
    }),
  )
}

消息订阅与发布（pubsub）

1. 工具库: PubSubJS
2. 下载: npm install pubsub-js --save 可以用于任意组件间的通信
   使用步骤：

1 import PubSub from 'pubsub-js' //引入
2 PubSub.subscribe('delete', function(data){ }); //订阅
3 PubSub.publish('delete', data) //发布消息

假设现在我A组件向B组件传递数据

// 我是A组件
import PubSub from 'pubsub-js'
import axios from 'axios'
axios.get(`/api1/search/users?q=${keyWord}`).then(
  response => {
    // 请求成功后通知List更新状态
    PubSub.publish('atguigu',{
      isLoading: false,
      users: response.data.items
    })

  },
  err => {
    // 请求失败后通知List更新状态
    PubSub.publish('atguigu',{
      isLoading: false,
      err: err.message
    })
  }
)

我是B组件，我现在要接收数据

// B组件
import PubSub from 'pubsub-js'
componentDidMount(){
    this.token = PubSub.subscribe('atguigu',(msg,stateObj)=>{
      // 在第二个参数，回调中，第一个参数是必须要写的，可以用_当占位符用
      this.setState(stateObj)
    })
}