【12】基础知识:React ajax

一、React ajax

了解

React 本身只关注于界面,并不包含发送 ajax 请求的代码

前端应用需要通过 ajax 请求与后台进行交互(json 数据)

react 应用中需要集成第三方 ajax 库(或自己封装)

常用的 ajax 请求库

1、jQuery:比较重,如果需要另外引入不建议使用

2、axios:轻量级,建议使用

封装 XmlHttpRequest 对象的 ajax,promise 风格,可以用在浏览器端和 node 服务器端。

文档:https://github.com/axios/axios

安装:$ npm install axios

二、react 脚手架配置代理总结

React 项目启动以后,运行到本地 3000 端口,地址为 http://localhost:3000

请求 api 接口,接口地址为 http://localhost:5000/students | http://localhost:5001/cars

浏览器发起 ajax 请求时,会存在跨域问题

方式一

在 package.json 中追加如下配置

复制代码
"proxy": "http://localhost:5000"

请求地址修改为:http://localhost:3000/students (先请求本地3000端口下的代理,通过代理转发请求到5000端口,代理再将服务端返回数据转发回来)

javascript 复制代码
axios.get('http://localhost:3000/students')

说明:

1、优点:配置简单,前端请求资源时可以不加任何前缀。

2、缺点:不能配置多个代理。

3、工作方式:上述方式配置代理,当请求了 3000 不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源 public 目录下)

方法二

第一步:创建代理配置文件

复制代码
在src下创建配置文件:src/setupProxy.js

第二步:编写 setupProxy.js 配置具体代理规则

js 复制代码
// 配置代理中间件,以进行连接、表达、浏览器同步等。
const { createProxyMiddleware } = require('http-proxy-middleware')

// 配置代理服务
const apiProxy = createProxyMiddleware('/api1', { // api1 是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
	target: 'http://localhost:5000', // 配置转发目标地址(能返回数据的服务器地址)
	changeOrigin: true, // 控制服务器收到的请求头中Host的值
	pathRewrite: { // 重写请求路径(必须),去除请求前缀,保证交给后台服务器的是正常请求地址
		'^/api1': ''
	}
})

const apiProxy2 = createProxyMiddleware('/api2', {
	target: 'http://localhost:5001',
	changeOrigin: true,
	pathRewrite: {
		'^/api2': ''
	}
})

module.exports = function(app) {
	app.use(apiProxy)
	app.use(apiProxy2)
}

说明:

1、优点:可以配置多个代理,可以灵活的控制请求是否走代理。

2、缺点:配置繁琐,前端请求资源时必须加前缀。

三、消息订阅-发布机制

实现兄弟组件间通信

1、工具库:PubSubJS

2、下载: npm install pubsub-js --save

3、使用:

js 复制代码
import PubSub from 'pubsub-js' // 引入
PubSub.subscribe('delete', function(msg, data){ }) // 订阅
PubSub.publish('delete', data) // 发布消息
PubSub.unsubscribe() // 取消订阅(类似于定时器timer)

四、扩展 Fetch

1、文档:

https://github.github.io/fetch/

https://segmentfault.com/a/1190000003810652

2、特点

fetch:原生函数,不再使用 XmlHttpRequest 对象提交 ajax 请求,支持 promise

老版本浏览器可能不支持

相关推荐
gnip5 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫6 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel7 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼7 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手11 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法11 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku11 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode12 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu12 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu12 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript