React–》在React中发送Ajax请求

React本身只关注于界面，并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互(json数据)。react应用中需要集成第三方ajax库(或自己封装)。常用的Ajax请求库，且建议使用的是axios：其封装了XMLHttpRequest对象的ajax，其具有promise风格，可以用在浏览器端和node服务器端。

配置代理

我们在对外进行发送Ajax请求的时候，可能因为端口号的不匹配而产生了跨域问题，要知道我们在创建React脚手架时，默认创建的端口是3000，而我们要先端口还为5000的服务器发送ajax请求应该怎么办，请看如下操作：

我们用node.js创建一个端口号为5000的服务器，如下：(了解node请参考：node专栏)

const express = require('express')
const app = express()

app.use((req,res,next)=>{
  console.log('有人请求了服务器！')
  next()
})

// 发送 get 请求
app.get('/student',(req,res)=>{
  const students = [
    {id:'01',name:'Tom',age:18},
    {id:'02',name:'Jack',age:12},
    {id:'03',name:'Andy',age:28},
    {id:'01',name:'Tony',age:38},
  ]
  res.send(students)
})

app.listen(5000,()=>{
  console.log('server running at http://127.0.0.1:5000')
})

我们用react脚手架创建的react项目，向服务器发送get请求：

import axios from 'axios';
import React, { Component } from 'react';
class App extends Component {
  getClassic_quotes = ()=>{
    axios.get('http://127.0.0.1:5000/student').then(
      response => {console.log('成功了',response.data)},
      error => {console.log('失败了',error)}
    )
  }
  render() {
    return (
      <div>
        <button onClick={this.getClassic_quotes}>点我获取学生信息</button>
      </div>
    );
  }
}
export default App;

如何解决这个问题呢？我们可以进行配置代理，其原理图大致如下所示：

package.json中追加配置(法一)

根据这个原理图，我们可以开始配置代理人了，如下，在package.json中新建一个proxy代理节点，输入我们要访问的服务器的根路径，这样该服务器中的所有资源我们都可以通过ajax请求进行拿到：

配置完代理人，根据上文的原理图我们知道，客户端请求的并不直接是目标服务器，而是中间人是我们自己创建的代理服务器，代理服务器的端口号与客户端是一致的，所以我们要对之前请求目标服务器的url地址进行简单的修改，将其端口修改成与客户端一致：

配置代理和修改端口完成之后，我们在进行发送ajax请求后，数据就可以拿到了：

优点：配置简单，前端请求资源时可以不加任何前缀。

缺点：不能配置多个代理。

工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000(优先匹配前端资源)

配置代理配置文件(法二)

当我们想请求多个服务器资源时，可以采用这种方式，配置的文件名必须固定，和webpack相关的配置联合在一起。在src目录下创建配置文件：src/setupProxy.js 。

编写setupProxy.js配置的具体规则，如下：

const {createProxyMiddleware} = require('http-proxy-middleware')
// /http-proxy-middleware 1.x 版本后用这个 const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    createProxyMiddleware('/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': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    }),
    createProxyMiddleware('/api2', { 
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  )
}

优点：可以配置多个代理，可以灵活的控制请求是否走代理。

缺点：配置繁琐，前端请求资源时必须加前缀。

fetch的简单使用

百度百科讲解：Fetch被称为下一代Ajax技术,采用Promise方式来处理数据。fetch作为原生的能够去发送Ajax请求，与xhr相比确实是代码简洁了不少，但是对不熟悉Promise的人来说还是有一点难度的，fetch本身对浏览器的要求也比较高，其还不是 W3C 规范，因此原生支持率并不高。但是总的来说，也是作为一个了解，将来面试官询问原生除了xhr发送Ajax请求，还有谁还可以？哎，这里就可以去提一下fetch了，fetch的使用官网为：fetch 。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="getword()">点击发送请求</button>
  <script>
    async function getword(){
      try {
      const response = await fetch('https://api.uixsj.cn/hitokoto/get?type=social')
      const data = await response.text()
      console.log(data);
      } catch (error) {
        console.log('请求出错',error);
      }
    }
  </script>
</body>
</html>