三、【React脚手架】React Ajax（axios）

1、说明

1. React本身只关注于界面, 并不包含发送 ajax 请求的代码
2. 前端应用需要通过 ajax 请求与后台进行交互( json 数据)
3. React 应用中需要集成第三方 ajax 库(或自己封装)

2、常用的ajax请求库

1. jQuery：比较重, 如果需要另外引入不建议使用
2. axios：轻量级, 建议使用
   1. 封装 XmlHttpRequest 对象的 ajax
   2. promise 风格
   3. 可以用在 浏览器端 和 node 服务器端

3、axios

• 详情可访问 github-axios
• 安装指令：yarn add axios
• 如遇跨域可参阅4、React脚手架配置代理 或参阅视频 脚手架配置代理

3.1、相关API

3.1.1、get

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3.1.2、post

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
	console.log(response);
})
.catch(function (error) {
	console.log(error);
});

3.2、Demo

import React, { Component } from 'react'
import axios from 'axios'

export default class App extends Component {

  getData = () => {
    // 服务器请自备
    axios.post('http://localhost:8003/tBannerHtml/selectBanner').then(
      response => {
        console.log(`请求成功，返回参数：`, response.data)
      },
      error => {
        console.log(`请求失败，失败原因：`, error)
      }
    )
  }

  render() {
    return (
      <div>
        <button onClick={this.getData}>点我获取信息</button>
      </div>
    );
  }
}

4、React脚手架配置代理

4.1、方法一

在 package.json 中追加如下配置

"proxy":"http://localhost:5000"

说明：

1. 优点：配置简单，前端请求资源时可以不加任何前缀。
2. 缺点：不能配置多个代理。
3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

4.2、方法二

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

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

2. 编写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字段的值
         /*
         	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
         	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
         	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
         */
         pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
       }),
       proxy('/api2', { 
         target: 'http://localhost:5001',
         changeOrigin: true,
         pathRewrite: {'^/api2': ''}
       })
     )
   }
   

说明：

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