【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

老版本浏览器可能不支持

相关推荐
慧一居士30 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead32 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码8 小时前
1.
react.js·node.js·angular.js