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

103 阅读 0 评论 68 点赞

我是靠谱客的博主重要发带，这篇文章主要介绍React 使用axios发送网络请求、配置代理的两种方式(笔记)，现在分享给大家，希望可以做个参考。

文章目录

- - 1. 介绍
  - 2. 基本使用
  - 3. React配置代理
  - - 3.1 方式一
    - 3.2 方式二

1. 介绍

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

2. 基本使用

复制代码

1
2
3
4
// 使用 npm/yarn 安装
npm i axios
yarn add axios

复制代码

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 方式一

复制代码

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

复制代码

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

3.2 方式二

复制代码

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 配置部分
/*
  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": ""},
 	})
  )
}