当前位置: 首页 > news >正文

Vue3:数据交互axios

回调函数 

> 回调函数: 一些特殊的函数,表示未来才会执行的一些功能,后续代码不会等待该函数执行完毕就开始执行了

1. Promise

1.1 简介

> 前端中的异步编程技术,类似Java中的多线程+线程结果回调!

* Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了`Promise`对象。
  
* 所谓`Promise`,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

Promise三种状态:

(1)Promise对象代表一个异步操作,有三种状态:`Pending`(进行中)、`Resolved`(已完成,又称 Fulfilled)和`Rejected`(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。

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

1.2. 基本用法 

<script>//基础用法console.log("code1执行")/*** 参数1:resovle函数是成功结果* 参数2:reject函数是失败结果*///创建promise对象let promise = new Promise(function(resolve, reject) {console.log("promise执行")resolve()//reject()})promise.then(//调用promise时会根据上面放行结果执行函数1还是函数2//当上面调用resolve()函数时会执行then的参数1function() {console.log("promise resolve")},//当上面调用reject()函数时会执行then的参数二function() {console.log("promise reject")})console.log("code2执行")</script>

 1.3 Promise catch()用法

catch用于捕捉异常或者错误时执行的回调函数 

<script>//catch用法console.log("code1执行")//创建promise对象let promise = new Promise(function (resolve, reject) {console.log("调用promise啦")throw new Error("promise抛出异常")})//当执行结果为成功时会执行下面的函数promise.then(function() {console.log("promise resolve")}//当执行结果为失败或者有异常时会执行catch里面的函数).catch(function(error) {console.log(error)})console.log("code2执行")</script>

 1.4 async关键字

使用async关键字后可以简易的创建一个Promise对象 

<script>console.log("async关键字1")/*** async:* 通过async关键字可简洁的创建promise对象* 1.async修饰的函数调用后若函数返回结果为非promise对象,则会创建一个resolve结果的promise对象* 2.async修饰的函数调用后若函数返回结果为prmoise对象,则此时async函数返回的结果由该对象的状态决定* 3.若async修饰的函数抛出异常,则会返回一个reject结果的promise对象*/async function fun1() {console.log("async关键字创建promise对象啦")//当正常返回结果时会执行resolve结果的函数//return 10throw new Error("返回异常")}//调用async关键字修饰的函数会返回一个promise对象let promise = fun1()promise.then(//若函数正常返回结果即执行resolve函数//可以在执行reslolve结果的函数中使用参数接收返回结果,此时value即返回结果function(value) {console.log("resolve:" + value)}).catch(function(error) {console.log("reject/exceptin:" + error)})console.log("async关键字2")</script>

 1.5 await关键字

通过await关键字可以简易的获取Promise对象里面的信息 

<script>/*** await:* 1.await必须在async修饰的函数中使用* 2.await一般右侧是promise对象,但是也可也是其他值,如果是其他值则直接返回await右侧的值* 3.如果是修饰promise对象且对象为成功状态,则返回promise对象返回的值* 4.如果是修饰promise对象且对象为失败状态,则返回异常,可用try/catch语句捕获* 5.await会等右边的promise对象执行结束,然后再获取结果,后续代码也会等待await的执行 */async function fun1() {throw new Error("错误")}async function fun2() {try{//let res = await "zhangsan"let res = await fun1()console.log(res)} catch (e) {console.log(e)}}fun2()</script>

 2. Axios

2.1 简介

Axios是一个基于Promise的网络请求库,它可以运行在浏览器和Node.js环境中。Axios本质上是对原生XHR(XMLHttpRequest)的封装,并使用Promise技术实现异步操作,这使得处理复杂的请求和响应更加简单和直观。

Axios的主要特点包括:

1. **支持浏览器和Node.js**:Axios既可以在浏览器中使用,也可以在Node.js环境中使用,提供了统一的API用于发起HTTP请求。
2. **Promise支持**:Axios基于Promise实现异步操作,这意味着你可以使用`.then()`和`.catch()`等方法来处理请求的成功和失败情况。
3. **拦截请求和响应**:Axios允许你在请求和响应被发送或接收时拦截它们,这样你可以进行自定义的处理,例如在请求发送前设置token,在响应处理后统一处理错误信息等。
4. **转换请求和响应数据**:Axios可以自动转换请求和响应的数据,例如自动将JSON数据转换成JavaScript对象。
5. **取消请求**:你可以使用Axios的取消功能来取消正在进行的请求。
6. **客户端防御XSRF**:Axios能够保护客户端免受跨站请求伪造(XSRF)的攻击。
7. **多种请求方式**:Axios支持多种HTTP请求方式,包括GET、POST、PUT、DELETE等,满足各种场景下的需求。

在使用Axios时,你可以使用不同的方式来发起请求。例如,你可以使用`axios(config)`方式,直接将相关配置(包括请求URL)作为参数传入到axios方法中;或者你也可以使用`axios(url[, config])`方式,第一个参数传入请求URL,第二个参数传入其他配置参数。

总的来说,Axios是一个功能强大且易于使用的网络请求库,它可以帮助你更轻松地处理HTTP请求和响应。

 

2.2 Hello World 

<script setup>
import {ref, reactive, onUpdated} from 'vue'
import axios from 'axios'let message = reactive({code:0,content:""}
)function getMessage() {//axios({}) 调用axios函数会返回一个promise对象//请求三要素:请求方式method  请求路径url 请求参数keyvalue json ......let promise = axios({method:"get",url:"https://api.uomg.com/api/rand.qinghua?format=json",data:{//这里的数据会放入请求体中,前提是以post方式提交},params:{//这里的数据不论是以get/post方式提交都会以键值对的方式放入请求体中format:"json",username:"zhangsan"}})promise.then(function(response) {/*** response响应报文对象:* data:响应回来的信息* config:配置信息* data: code响应码  content响应内容* headers:响应头* request:请求配置信息* status:请求状态码* statusText:响应状态文本*/console.log(response)message.content = response.data.content}).catch (function(error) {})
}</script><template><div><h1>{{ message.content }}</h1><button @click="getMessage()">变</button></div>
</template><style scoped></style>

 2.3 Axios get和post方法

get方法

/**

   * axios.get()基本用法:

   * axios.get(url, [, config])

   *

   * axios.get(url, {

   *  指定配置key:配置值,

   *  指定配置key:配置值

   * })

   *

   * 栗子:

   * axios.get(url)

   * axios.get(url, {params:{}, headers:{}})

   *

   * axios.post

   */

try {let response = await axios.get("https://api.uomg.com/api/rand.qinghua?", {params: {//向url后添加键值对参数format: "JSON",username: "zhangsan",userpwd: "1233456"},headers: {//设置请求头}})} catch (error) {}

 post方法

/**

   * axios.post()基本用法:

   * axios.post(url[, data[, config]])

   *

   * axios.post(url, {自己配置key(如:username):值}, {指定配置key(如:params):{}})

   */

   /**

    * get和post语法区别:

    * get中自己配置的key可直接放入params中,而post中自己配置的键值对参数在一个大括号中单独书写

    */

 

try {let response = await axios.post("api/rand.qinghua?",{username: "zhangsna",userpwd: "123456"},{params: {format: "JSON"}})message.value = response.data.content} catch (error) {}

 2.4 Axios拦截器

> 如果想在axios发送请求之前,或者是数据响应回来在执行then方法之前做一些额外的工作,可以通过拦截器完成 

import axios from 'axios'//创建axios对象
const instance = axios.create({baseURL:"https://api.uomg.com/",timeout:10000
})//添加请求拦截器 请求发送之前
//设置请求拦截
instance.interceptors.request.use(//设置请求成功处理config => {console.log("request before interceptors")//请求成功必须返回配置对象,否则配置信息会丢失return config},//设置请求失败处理error => {console.log("request error")return Promise.reject(error)}
)//添加回复拦截器 回复响应回来
//设置回复拦截
instance.interceptors.response.use(//设置回复成功处理response => {console.log("response before insterceptors")//回复成功必须返回回复报文对象,否则回复报文丢失return response},//设置回复失败处理error => {console.log("response error")return Promise.reject(error)}
)//axios对外默认暴露
export default instance

 

相关文章:

Vue3:数据交互axios

回调函数 > 回调函数: 一些特殊的函数,表示未来才会执行的一些功能,后续代码不会等待该函数执行完毕就开始执行了 1. Promise 1.1 简介 > 前端中的异步编程技术&#xff0c;类似Java中的多线程线程结果回调&#xff01; * Promise 是异步编程的一种解决方案&#xff0c…...

芯片的性能指什么

【省带宽、压成本专题】降低30%视频码率&#xff0c;深挖“窄带高清”的实现原理 - 知乎 芯片&#xff08;或微处理器、集成电路&#xff09;的性能主要指其完成特定任务的能力和效率。性能可以通过多种参数来衡量&#xff0c;这些参数反映了芯片设计的不同方面&#xff0c;包…...

Java通过百度地图API获取定位-普通IP定位

项目中有一个登录邮箱提醒的功能&#xff0c;需要根据IP地址获取定位信息&#xff0c;从而更好地提示用户账号登录的所在地。为此&#xff0c;花费了一些时间来实现这个功能。 在CSDN搜索了一下&#xff0c;发现关于获取定位的文章说明都不够详细&#xff0c;于是决定自己创作一…...

5月13号作业

使用消息队列实现的2个终端之间的互相聊天 并使用信号控制消息队列的读取方式&#xff1a; 当键盘按ctrlc的时候&#xff0c;切换消息读取方式&#xff0c;一般情况为读取指定编号的消息&#xff0c;按ctrlc之后&#xff0c;指定的编号不读取&#xff0c;读取其他所有编号的消息…...

【计算机网络】Socket网络编程

&#x1f4bb;文章目录 &#x1f4c4;前言Socket编程基础概念工作原理 Socket API介绍socket函数绑定、监听函数accept、connect接受/发送函数 Socket API的应用Socket类与其派生类的设计服务器与客户端的设计使用 &#x1f4d3;总结 &#x1f4c4;前言 现今我们的日常生活当中…...

Ansible自动运维工具之playbook

目录 一.inventory主机清单 1.定义 2.变量 &#xff08;1&#xff09;主机变量 &#xff08;2&#xff09;组变量 &#xff08;3&#xff09;组嵌套 二.playbook基本内容 1.组成 &#xff08;1&#xff09;Tasks: 任务&#xff0c;即调用模块完成的某操作 &#xff0…...

【启明智显技术分享】SSD201/SSD202D核心板UI界面开发全攻略:LVGL使用指南

提示&#xff1a;作为Espressif&#xff08;乐鑫科技&#xff09;大中华区合作伙伴及sigmastar&#xff08;厦门星宸&#xff09;VAD合作伙伴&#xff0c;我们不仅用心整理了你在开发过程中可能会遇到的问题以及快速上手的简明教程供开发小伙伴参考。同时也用心整理了乐鑫及星宸…...

数据可视化(九):Pandas北京租房数据分析——房源特征绘图、箱线图、动态可视化等高级操作

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…...

ADOP带你了解:跳线与交叉电缆有何不同?

如果您想将设备连接到互联网&#xff0c;您可能想知道要使用的正确电缆。跳线和交叉电缆都是类型的以太网电缆&#xff0c;可帮助连接计算机、调制解调器、路由器和交换机等设备。那么&#xff0c;跳线和交叉电缆有什么区别呢&#xff1f;让我们讨论这两种类型的电缆&#xff0…...

Django 和 Spring Boot

标题 Django (Python)Django提供的组件Django 的处理逻辑 Spring Boot (Java)Spring Boot 的特点Spring Boot 的处理逻辑 MVC设计模式模型&#xff08;Model&#xff09;视图&#xff08;View&#xff09;控制器&#xff08;Controller&#xff09;逻辑处理过程 Django 和 Spri…...

上位机图像处理和嵌入式模块部署(树莓派4b的替代品)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 实话实说&#xff0c;树莓派4b的产品力还是比较优秀的&#xff0c;价格还算适中。但是和国产卡片电脑比起来&#xff0c;则逊色不少。功能差不多的…...

Springboot整合 Spring Cloud Gateway

1.Gateway介绍 1.是spring cloud官方推出的响应式的API网关框架&#xff0c;旨在为微服务架构提供一种简单有效的API路由的管理方式&#xff0c;并基于Filter的方式提供网关的基本功能&#xff0c;例如&#xff1a;安全认证&#xff0c;监控&#xff0c;限流等等。 2.功能特征…...

Rust开发工具有哪些?

目录 一、JetBrains公司的RustRover​编辑 二、微软公司的Visual Studio Code 三、Rust编译工具 一、JetBrains公司的RustRover RustRover是由JetBrains开发的一款专为Rust开发量身定制的新兴IDE&#xff0c;目前还处于早期访问阶段。它支持Rust、Cargo、TOML、Web和数据库等…...

20240514基于深度学习的弹性超材料色散关系预测与结构逆设计

论文&#xff1a;Dispersion relation prediction and structure inverse design of elastic metamaterials via deep learning DOI&#xff1a;https://doi.org/10.1016/j.mtphys.2022.100616 1、摘要 精心设计的超材料结构给予前所未有的性能&#xff0c;保证了各种各样的具…...

SAP:FI 财务凭证行项目文本前台修改

一、问题描述 财务凭证行项目文本点击修改&#xff0c;但是前台有的行可以修改&#xff0c;有的行是灰色的不能修改&#xff0c;如下图所示&#xff0c;这个文本信息有误&#xff0c;必须修改怎么办&#xff1f; 二、思路分析 有的行可以修改&#xff0c;有的行不能修改&#x…...

【linux系统学习教程 Day02】网络安全之Linux系统学习教程,管道,文件内容统计,过滤排序,去重,目录介绍

1-4 管道 管道符号&#xff1a; | &#xff0c;可以将前面指令的执行结果&#xff0c;作为后面指令的操作内容。 ## 比如过滤ip地址 ip addr | tail -4 | head -1 解释一下就是先执行 ip addr ,得到的结果当做 tail -4 的输入&#xff0c;意思就是查看ip addr 结果的后四行内容…...

Spring Cloud LoadBalancer 4.1.2

LoadBalancer位于Spring Cloud Commons 模块 Spring Cloud 提供了自己的客户端负载均衡器抽象和实现。对于负载均衡机制&#xff0c;添加了 ReactiveLoadBalancer 接口&#xff0c;并为其提供了基于Round-Robin和Random的实现。为了让实例从反应式中进行选择&#xff0c;使用了…...

使用Xshell工具连接ubuntu-方便快捷

使用Xshell连接ubuntu 在命令行输入 “sudo apt-get install openssh-server”安装openssh-server 开启 ssh-server&#xff0c;在命令行输入 “service ssh start”&#xff0c;然后输入密码即可...

leetcode22 括号生成-组合型回溯

题目 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 输入&#xff1a;n 3 输出&#xff1a;[“((()))”,“(()())”,“(())()”,“()(())”,“()()()”] 解析 func generateParenthesis(n int) …...

mac定时任务、自启动任务

https://quail.ink/mynotes/p/mac-startup-configuration-detailed-explanation <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.d…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

SpringAI实战:ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源&#xff0c;提供了很全面的思路&#xff0c;减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接&#xff1a;https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架&#xff1a; 代码框架结构&#xff1a;readme有…...