【12】基础知识:React ajax

这篇具有很好参考价值的文章主要介绍了【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端口,代理再将服务端返回数据转发回来)

axios.get('http://localhost:3000/students')

说明:

1、优点:配置简单,前端请求资源时可以不加任何前缀。
2、缺点:不能配置多个代理。
3、工作方式:上述方式配置代理,当请求了 3000 不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源 public 目录下)

方法二

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

在src下创建配置文件:src/setupProxy.js

第二步:编写 setupProxy.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、使用:

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

老版本浏览器可能不支持文章来源地址https://www.toymoban.com/news/detail-724518.html

到了这里,关于【12】基础知识:React ajax的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端知识】React 基础巩固(二十八)——StrictMode

    StrictMode 是一个用来突出显示应用程序中潜在问题的工具 与 Fragment 一样,StrictMode 不会渲染任何可见的 UI 为后代出发额外的检测和警告 严格模式检查仅在开发模式下运行,不影响生产构建 严格模式检查什么? 识别不安全的生命周期 使用过时的 ref API 检查意外的副作用 组件

    2024年02月16日
    浏览(50)
  • 【前端知识】React 基础巩固(二十七)——Fragment

    Fragment 允许将子列表分组,而无需向 DOM 添加额外节点 可以采用语法糖 / 来替代 Fragment,但在需要添加 key 的场景下不能使用此短语 查看Fragment应用后的效果

    2024年02月16日
    浏览(61)
  • 【前端知识】React 基础巩固(三十九)——React-Router的基本使用

    Router中包含了对路径改变的监听,并且会将相应的路径传递给子组件。 Router包括两个API: BrowserRouter使用history模式 HashRouter使用hash模式(路径后面带有#号) 尝试在项目中使用HashRouter: 安装Router 在 index.js 中引入并使用HashRouter Routes:包裹所有的Route,在其中匹配一个路由(

    2024年02月14日
    浏览(65)
  • 【前端知识】React基础巩固(二)——JSX注意点

    createElement存在的问题: 繁琐不简洁 不直观,无法一眼看出所描述的结构 不优雅,开发体验不好 JSX 简介:JSX 是 JavaScript XML 的简写,表示了在JS代码中写XML(HTML)格式的代码 优势:声明式语法更加直观,与HTML结构相同,降低学习成本,提高开发效率 JSX 是 react 的核心内容‘

    2024年02月09日
    浏览(70)
  • 【前端知识】React 基础巩固(二十九)——过渡动画 react-transition-group

    react-transition-group 包含: Transition(该组件是一个和平台无关的组件,不一定结合 CSS) CSSTransition(通常使用此组件实现过渡动画效果) SwitchTransition(两个组件显示/隐藏切换时使用) TransitionGroup(将多个动画包裹其中,一般用于列表中元素的动画) CSSTransition CSSTransition 基于

    2024年02月16日
    浏览(66)
  • 【前端知识】React 基础巩固(二十六)——Portals 的使用

    通常,组件会渲染到 root 节点下。可使用 Portals 将组件渲染至其他节点。 添加 id 为 more、modal 的 div 元素 构建 Modal.jsx, 通过 createPortal 把组件渲染到指定的 modal 节点下 构建 App.jsx 查看渲染结果

    2024年02月16日
    浏览(49)
  • 【前端知识】React 基础巩固(三十一)——Redux的简介

    概念 纯函数(确定的输入一定产生确定的输出,函数在执行过程中不产生副作用): 在程序设计中,若一个函数符合以下条件,那么这个函数就被称为纯函数 此函数在相同的输入值时,需产生相同的输出 函数的输出和输入值以外的其他隐藏信息或状态无关,也和由I/O设备产

    2024年02月16日
    浏览(52)
  • 【前端知识】React 基础巩固(七)——JSX 的基本语法

    JSX 是一种 JS 的语法扩展(extension),也可以称之为 JavaScript XML,因为看起来就是一段 XML 语法 它用于描述我们的 UI 界面,并且其可以和 JS 融合在一起使用 它不同于 Vue 中的模块语法,不需要专门学习模块语法中的指令 React 认为 渲染逻辑 本质上与 其他UI逻辑 存在内在耦合

    2024年02月10日
    浏览(60)
  • 【前端知识】React 基础巩固(三十五)——ReduxToolKit (RTK)

    Redux Tool Kit (RTK)是官方推荐的编写Redux逻辑的方法,旨在成为编写Redux逻辑的标准方式,从而解决上面提到的问题。 RTK的核心API主要有如下几个: configureStore:包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合你的slice reducer,添加你提供的任何Redux中间件

    2024年02月15日
    浏览(65)
  • 【前端知识】React 基础巩固(十九)——组件化开发(三)

    Main.jsx TabControl/index.jsx TabControl/style.css

    2024年02月13日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包