React 使用axios发送网络请求、配置代理的两种方式(笔记)

1. 介绍

• react 全家桶中没有封装请求的库，可以引用 jquery 或者 axios 库使用
• jquery 太重了，所以用 axios 比较好

2. 基本使用

// 使用 npm/yarn 安装
npm i axios
yarn add axios

// 插入一点
// 创建 react 项目指令
create-react-app 项目名称

import React, { Component } from "react";
import axios from "axios"

export default class index extends Component {
  componentDidMount(){
    // axios 是 promise 风格的，具体的可以在官网查看
	axios.get(xxx)
	  .then(res=>{
	  })
	  .catch(err=>{
	  })
  }
}

3. React配置代理

前端端口：3000
后端端口：5000

3.1 方式一

// 请求部分
axios.get("http://xxx.xxx.xxx:3000")

// 代理部分
/*
  在 package.json 文件中配置
  这个时候请求前端地址，配置时要写后端地址，当前端地址没有请求到东西时，会进行代理
  但是这种方式只能代理一个地址
*/
{
  "name":"xxx"
  "version": "0.1.0",
  ...
  "proxy":"http://xxx.xxx.xxx:5000"
}

3.2 方式二

// 请求部分
axios.get("http://xxx.xxx.xxx:3000/api1")
axios.get("http://xxx.xxx.xxx:3000/api2")

// 配置部分
/*
  1.需要在 src 目录下创建一个 setupProxy.js 文件
  2.引入 http-proxy-middleware 库，这个库在使用脚手架创建项目的时候，已经下载好了
*/
const { createProxyMiddleware } = require("http-proxy-middleware")

module.exports = function(app){
  app.use(
	createProxyMiddleware("/api1", { // 目标地址(需要代理的地址)
 	  target: "http://xxx.xxx.xxx:5000", // 转发地址
 	  changeOrigin: true, // 忽悠后端接收的 host 值，true：后端 host，false：前端 host
 	  pathRewrite: {"^/api1": ""}, // 路径重写
 	}),
 	createProxyMiddleware("/api2", {
 	  target: "http://xxx.xxx.xxx:5001", // 第二个转发地址
 	  changeOrigin: true,
 	  pathRewrite: {"^/api1": ""},
 	})
  )
}