React 使用axios发送网络请求、配置代理的两种方式(笔记)
react全家桶中没有封装请求的库,可以引用jquery或者axios库使用jquery太重了,所以用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": ""},
})
)
}
更多推荐
已为社区贡献2条内容
所有评论(0)