【Java Web】Axios实现前后端数据异步交互

目录

一、Promise概述

二、Promise基本用法

三、async和await关键字

四、Axios介绍

4.1 Axios基本用法

4.2 Axios简化用法之get和post方法

五、Axios拦截器

六、跨域问题处理


一、Promise概述

axios是代替原生的ajax实现前后端数据交互的一套新解决方案,而axios使用的是promise相关的语法,而Promise主要是解决函数回调的问题。

普通函数: 普通函数被调用时只有函数执行完毕后才会执行后续的代码。

回调函数:就是在一个函数体里面去调用另一个函数。回调函数的执行通常依托于事件的驱动,当事件发生后才会自动执行的函数。回调函数之外的代码不会等到回调函数执行完毕之后才会执行。

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是个对象,从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。

Promise特点:

(1)Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。

(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。

二、Promise基本用法

Promise对象回调函数两个形参(形参名任意)

  • resolve形参1:当在Promise对象的回调函数体中调用resolve()方法时,则表示Promise对象由Pending进行中状态转化为了Resolved已完成状态。此时浏览器就会自动调用Promise.then()方法中的首个形参回调函数。

  • reject形参2:当Promise对象的回调函数体中调用第二个形参reject()方法时,则表示Promise对象由Pending进行状态转换为了Rejectd已失败状态。此时浏览器会自动调用Promise.then()方法中的第二个形参回调函数。

说明: Promise.then()方法的返回对象调用其catch(回调函数)方法时,当Promise对象由进行状态转化为已失败状态(调用reject())

或Promise对象回调函数体异常报错,则会自动触发catch方法中回调函数的执行。

三、async和await关键字

async:

使用async关键字标注的方法可以将一个普通函数转化为一个异步函数即Promise对象的回调函数,从而帮助我们使用简洁的语法快速获得一个promise对象。

1、async关键字标注的函数返回值就是一个promise对象

2、async异步函数若能正常返回结果,则Promise对象就是一个成功状态,返回值就是成功状态的返回值。

3、async异步函数中出现了异常,此时返回的promise对象就是一个失败状态。

4、async异步函数返回的如果是一个Promise对象,则Promise对象的状态由async关键字标注的内部promise

状态所决定。

await:

使用await关键字可以帮助我们快捷的获取Promise成功状态的返回值。

1、await关键字修饰的若是一普通值则直接返回普通值、若修饰的是一个Promise对象则返回其成功状态的返回值。

2、await关键字修饰的若是一个失败状态的Promise则会直接抛异常。

3、await关键字只能出现在由async修饰的异步函数中使用,但异步函数中可以没有await关键字。

4、只有await关键字修饰的代码执行完毕后,其所在的方法中后面的代码才会执行;异步函数之外的其它代码则不会等待await修饰的代码执行完后再执行。

四、Axios介绍

传统方式前端向后端发送异步请求需要使用原生的Ajax代码实现。此种方式代码比较繁琐而Axios就是将原生的Ajax的功能封装API方法,前端向后端发送数据时只需要调用Axios对象相关的API即可,极大的简化了代码,使用方便。

4.1 Axios基本用法

步骤:

  1. 使用npm install axios安装Axios框架。
  2. 从axios框架中默认导入axios对象。
  3. 调用axios方法,向后端发送请求。
  4. 使用axios返回的promise对象并调用then()方法,来接收axios方法成功发送请求后,服务端返回的response响应对象。

4.2 Axios简化用法之get和post方法

  • axios.get()请求方法:

  • axios.post()请求方法:

五、Axios拦截器

如果axios向后端发送的是一个正常的请求,则请求在到达后端服务器之前会先经过请求拦截器的方法1进行处理,处理过后再将请求报文返回放行给后端服务器。若axios发送的是一个错误、异常的请求,请求拦截器方法2执行处理后,会直接响应给axios请求方法一个失败的Promise对象。

后端服务器在处理正常的请求后,响应报文在返回给axios发送请求的调用函数之前会先经过响应拦截器,如果后端响应的是正常的报文则由响应拦截器的方法1处理响应报文后,将其返回给axios请求方法;若是异常的响应报文则由响应拦截器的方法2处理后,返回给axios请求方法。

六、跨域问题处理

在前后端分离开发环境中,前端视图会单独部署到一台服务器上而后端工程也会单独部署到另台服务器中。当前端视图需要通过axios异步请求向另台服务器的后端请求数据时,此时用户浏览器就会面临着跨域的问题。所谓跨域就是用户浏览器访问的页面来自于前端服务器,而页面异步请求目标地址则是另一台的后端服务器的url与用户浏览器当前地址栏访问的目标服务器不是同一个服务。此时当用户向另台后端服务器发送异步请求数据时,由于涉及到跨域的问题,浏览器就会认为此次用户异步请求响应回来的数据是不安全的、导致axios异步请求失败。

解决方案:

浏览器在正式向后端服务器发送异步请求数据之前,其实会先向后端服务器发送一个option方式的预检请求、询问跨域异步请求的数据是否安全。此时,我们就可以在后端服务工程上创建个跨域处理的过滤器,对用户发送过来的请求进行过滤。若用户发送的是一个预检请求(请求方式是option),则直接响应给用户浏览器一个200状态码的响应报文,并设置允许浏览器跨域的相关响应头。这样浏览器在向后端服务器发送axios异步请求之前、由于之前的预检请求后端服务器告诉其浏览器可以进行跨域访问且异步请求的数据是安全的。这样用户浏览器就可以跨域向后端服务器发送请求获取到响应信息并渲染到标签页。

@声明:“山月润无声”博主知识水平有限,以上文章如有不妥之处,欢迎广大IT爱好者指正,小弟定当虚心受教!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/939277.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

网络编程 03:端口的定义、分类,端口映射,通过 Java 实现了 IP 和端口的信息获取

一、概述 记录时间 [2024-12-19] 前置文章: 网络编程 01:计算机网络概述,网络的作用,网络通信的要素,以及网络通信协议与分层模型 网络编程 02:IP 地址,IP 地址的作用、分类,通过 …

webdriver 反爬虫 (selenium反爬虫) 绕过

1. webdriver 反爬虫原理 爬虫程序可以借助渲染工具从动态网页中获取数据。 在这个过程中,“借助”其实是通过对应的浏览器驱动(即WebDriver)向浏览器发出指令的行为。因此,开发者可以根据客户端是否包含浏览器驱动这一特征来区分…

JAVA 零拷贝技术和主流中间件零拷贝技术应用

目录 介绍Java代码里面有哪些零拷贝技术java 中文件读写方式主要分为什么是FileChannelmmap实现sendfile实现 文件IO实战需求代码编写实战IOTest.java 文件上传阿里云,测试运行代码看耗时为啥带buffer的IO比普通IO性能高?BufferedInputStream为啥性能高点…

系统移植——Linux 内核顶层 Makefile 详解

一、概述 Linux Kernel网上下载的版本很多NXP等有自己对应的版本。需要从网上直接下载就可以。 二、Linux内核初次编译 编译内核之前需要先在 ubuntu 上安装 lzop 库 sudo apt-get install lzop 在 Ubuntu 中 新 建 名 为 “ alientek_linux ” 的 文 件夹 , …

Reactor

文章目录 正确的理解发送double free问题解决 1.把我们的reactor进行拆分2.链接管理3.Reactor的理论 listensock只需要设置_recv_cb,而其他sock,读,写,异常 所以今天写nullptr其实就不太对,添加为空就没办法去响应事件…

【深度学习】 零基础介绍卷积神经网络(CNN)

CNN学习 零基础介绍写个CNN最简单的代码一. 概述二. 搭建CNN1. 输入层2. 卷积层3. 激活层4. 池化层5. 全连接层6. 网络搭建小结7. 损失函数8. 梯度下降9. 反向传播10. 模型评估与正则化11. 尝试搭建自己的第一个CNN 三. 经典CNN结构四. 猫狗识别项目实践1. Paddle实现版本&…

Leetcode打卡:找到稳定山的下标

执行结果:通过 题目: 3258 找到稳定山的下标 有 n 座山排成一列,每座山都有一个高度。给你一个整数数组 height ,其中 height[i] 表示第 i 座山的高度,再给你一个整数 threshold 。 对于下标不为 0 的一座山&#xf…

leetcode刷题日记03——javascript

题目3: 回文数https://leetcode.cn/problems/palindrome-number/ 给你一个整数 x ,如果 x 是一个回文整数,返回 true ;否则,返回 false 。 回文数是指正序(从左向右)和倒序(从右向…

服务器数据恢复—RAIDZ离线硬盘数超过热备盘数导致阵列崩溃的数据恢复案例

服务器存储数据恢复环境: ZFS Storage 7320存储阵列中有32块硬盘。32块硬盘分为4组,每组8块硬盘,共组建了3组RAIDZ,每组raid都配置了热备盘。 服务器存储故障: 服务器存储运行过程中突然崩溃,排除人为误操…

Tact智能合约安全实践:TON生态系统中的常见错误

TON(The Open Network)以其创新特性和强大的智能合约性能,不断拓宽区块链技术的边界。基于早期的区块链平台(如以太坊等)的经验与教训,TON为开发者提供了一个更加高效且灵活的开发环境。其中推动这一进步的…

C进阶—指针(1)

若是阁下满意的话,可否一键三连呢! 第一篇进阶指针就是先了解各种新的概念(用法我们后面几篇再详细说!先只介绍概念),有疑惑很正常,只是暂时的,我们一起来看看吧! 字符指…

【Python使用】嘿马头条项目从到完整开发教程第9篇:缓存,1 缓存穿透【附代码文档】

本教程的知识点为:简介 1. 内容 2. 目标 产品效果 ToutiaoWeb虚拟机使用说明 数据库 理解ORM 作用 思考: 使用ORM的方式选择 数据库 SQLAlchemy操作 1 新增 2 查询 all() 数据库 分布式ID 1 方案选择 2 头条 使用雪花算法 (代码 toutiao-backend/common/…

谷歌浏览器的扩展程序自动更新设置

谷歌浏览器是全球最受欢迎的网络浏览器之一,其扩展程序更是为用户提供了丰富的功能。然而,随着时间的推移,扩展程序需要更新以修复漏洞、提升性能或增加新功能。本文将详细介绍如何在Chrome中设置扩展程序的自动更新。(本文由http…

LabVIEW与PLC点位控制及OPC通讯

在工业自动化中,PLC通过标准协议(如Modbus、Ethernet/IP等)与OPC Server进行数据交换,LabVIEW作为上位机通过OPC客户端读取PLC的数据并进行监控、控制与处理。通过这种方式,LabVIEW能够实现与PLC的实时通信&#xff0c…

在Windows Server路由和远程访问服务中启用L2TP/IPsec VPN

背景 路由和远程访问服务(Routing and Remote Access Services,RRAS)是Windows Server上的一个角色,包含很多功能,可以用来搭建VPN。然而,在什么也不做的初始配置中,它只允许PPTP协议连接。然而…

Android简洁缩放Matrix实现图像马赛克,Kotlin

Android简洁缩放Matrix实现图像马赛克,Kotlin 原理,通过Matrix把一个原图缩小到原先的1/n,然后再把缩小后的小图放大n倍,自然就是马赛克效果(相当于是放大后像素“糊”成一片了)。 import android.content.…

《Posterior Collapse and Latent Variable Non-identifiability》

看起来像一篇很有用的paper,而且还是23年的 没看完 后边看不懂了 Abstract 现有的解释通常将后验崩塌归因于由于变分近似而使用神经网络或优化问题。 而本文认为后验崩塌是潜在变量不可识别性的问题(a problem of latent variable non-identifiability) 本文证明了…

网络视频监控平台/安防监控/视频综合管理Liveweb视频汇聚平台解决方案

一、当前现状分析 当前视频资源面临以下问题: 1)不同单位在视频平台建设中以所属领域为单位,设备品牌众多,存在的标准不一,各系统之间也没有统一标准; 2)各单位视频平台建设分散、统筹性差&am…

【前端爬虫】关于如何获取自己的请求头信息(user-agent和cookie)

注意:由于user-agent和cookie中保存了部分账户信息,所以一定不要随意泄露给他人!!! 1.首先打开某个页面,点击键盘的F12键进入控制台,或者鼠标右键页面选择打开控制台 2.然后点击控制台上方的网…

共创共建!葡萄城 SpreadJS 完成 HarmonyOS NEXT 操作系统兼容认证

最新技术资源(建议收藏) https://www.grapecity.com.cn/resources/ 近日,华为“企业工作必备应用鸿蒙化论坛”在北京圆满落幕,论坛汇聚了众多行业精英和合作伙伴,聚焦讨论企业数字化转型与原生鸿蒙生态融合等话题。葡萄…