【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

老版本浏览器可能不支持

相关推荐
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端
程序猿阿伟3 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒3 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪3 小时前
AJAX的基本使用
前端·javascript·ajax