React学习day8——react ajax

推荐react ajax链接
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
https://blog.csdn.net/ZYC88888/article/details/82531610
安装axios

yarn add axios

配置代理

1、在src下创建代理文件xx.js
2、编写xx.js配置具体代理规则

//配置代理，可配置多个代理
const proxy = require('http-proxy-middleware')
module.exports = function(app){
    app.use(
        proxy('/api1',{
            target:'http:localhost:5000',
            changeOrigin:true,
            pathRewrite:{'^/api':''}
        }),
        proxy('/api2',{
            trarget:'http://localhost:50001',
            changeOrigin:true,
            pathRewrite:{'^/api2':''}
        })
    )
}

App.js

import './App.css';

//创建外壳组件
import React,{Component} from 'react'
//创建并暴露App组件
export default class App extends Component {
    getStudentData=()=> {
        // eslint-disable-next-line no-undef
        axios.get('http://localhost:5000/api/studentnpm').then(
          response=>{console.log('成功了',response.data);},
          error => {console.log('失败了',error);}
        )
    };
    getTeacherData=()=> {
        // eslint-disable-next-line no-undef
        axios.get('http://localhost:5001/api2/studentnpm').then(
            response=>{console.log('成功了',response.data);},
            error => {console.log('失败了',error);}
        )
    };
    
  render() {
    return (
        <div >
            <button onClick={this.getStudentData}>点我获取学生数据</button>
            <button onClick={this.getTeacherData}>点我获取学生数据</button>
        </div>
    )
  }
}