文章目录
- 一、为什么要使用axios
- 二、使用axios
- 三、React中解决跨域的两种方式
- 3-1、解决跨域的第一种方式
- 3-2、解决跨域的第二种方式
- 四、消息订阅与发布
- 4-1、安装
- 4-2、使用
- 4-3、总结
一、为什么要使用axios
1. 相对于其他基于ajax封装的请求，axios更加的轻便二、使用axios
import React from "react";
import axios from 'axios'
// 创建外壳组件App
export default class Hello extends React.Component {getStudentsData = ()=>{axios.get('http://localhost:3000/api1/students').then(res=>{console.log(res);})}getCarData = () =>{axios.get('http://localhost:3000/api2/cars').then(res=>{console.log(res);})}render(){return (<div><button onClick={this.getStudentsData}>点我获取学生数据</button><button onClick={this.getCarData}>点我获取汽车数据</button></div>)}
}三、React中解决跨域的两种方式
3-1、解决跨域的第一种方式
优点：简单
缺点：只能代理一台服务器
1. 再packge.json文件最后面加上代理服务器这里的后台服务器的端口是5000，代理服务器就向5000端口发请求"proxy":"http://localhost:5000"2. 发送请求的时候发送到本地项目运行的服务器上react项目是默认运行在3000端口的，这里发送请求的时候需要向3000端口发getStudentsData = ()=>{axios.get('http://localhost:3000/students').then(res=>{console.log(res);})}3. 3-2、解决跨域的第二种方式
1. src目录下面床加你一个setupProxy.js2. setupProxy.js中的配置const {createProxyMiddleware} = require('http-proxy-middleware')module.exports = function(app){app.use(createProxyMiddleware('/api1',{//遇见api1前缀的请求，就会触发该代理target:'http://localhost:5000',//请求转发给谁changeOrigin:true,//控制服务器收到的响应头中host】字段的值pathRewrite:{'^/api1':''}}),createProxyMiddleware('/api2',{target:'http://localhost:5001',changeOrigin:true,pathRewrite:{'^/api2':''}}))
}四、消息订阅与发布
4-1、安装
npm install pubsub-jsyarn add pubsub-js
4-2、使用
A组件
import PubSub from 'pubsub-js';
componentDidMount(){// 消息订阅PubSub.subscribe('lq',(_,data)=>{this.setState(data)})}
B组件
import PubSub from 'pubsub-js';
PubSub.publish('lq',{isFirst:false,isLoading:true})
4-3、总结
1. 消息订阅与发布适用于各种组件之间的通信
