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

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记录一下 log4j的漏洞

目录 背景 bug的产生 bug复现 JNDI 网络安全学习路线 &#xff08;2024最新整理&#xff09; 学习资料的推荐 1.视频教程 2.SRC技术文档&PDF书籍 3.大厂面试题 特别声明&#xff1a; 背景 log4j这次的bug&#xff0c;我相信大家都已经知道了&#xff0c;仅以…

网络安全软件堡垒机推荐行云管家云堡垒机!

随着互联网技术的快速发展&#xff0c;以及数字化转型的快速转变&#xff0c;网络安全已成为企业生存和发展的关键要素。网络安全不仅是国家等保要求&#xff0c;也是企业发展必须面对的挑战。目前市面上网络安全软件较多&#xff0c;这里我给推荐行云管家堡垒机&#xff01; …

【unity小技巧】减少Unity中的构建打包大小

文章目录 正常默认打包查看编辑器打包日志压缩图片压缩网格模型压缩贴图压缩音频文件只打64位包最终大小完结 正常默认打包 这里以安卓为例。先什么都不干&#xff0c;直接打包安卓apk&#xff0c;查看包大小 查看编辑器打包日志 搜索build report构建报告。构建报告我们应该…

Pytorch学习-引言

Pytorch相关链接 Pytorch官方网站 https://pytorch.org/ Pytorch的Github仓库 https://github.com/pytorch/pytorch Pytorch论坛 https://discuss.pytorch.org/ Pytorch离线下载包链接 https://download.pytorch.org/whl/torch_stable.html Pytorch学习视频推荐链接 http://【…

ubuntu 升级23.10 wifi固件缺失

昨晚家里ubuntu老机器23.04升级到23.10&#xff0c;出现wifi无法联网的故障&#xff0c;提示固件缺失。 查了不少资料&#xff0c;估计是要手工安装了&#xff0c;今天带跟网线回家&#xff0c;先要能上网啊。 经过几天折腾&#xff0c;我又从23.10升级到24.02 LTS版本&#…

手写一个SPI FLASH 读写擦除控制器

文章目录 flash读写数据的特点1. 扇擦除SE&#xff08;Sector Erase&#xff09;1.1 flash_se 模块设计1.1.1 信号连接示意图&#xff1a;1.1.2 SE状态机1.1.3 波形图设计&#xff1a;1.1.4 代码 2. 页写PP(Page Program)2.1 flash_pp模块设计2.1.1 信号连接示意图&#xff1a;…

apt结尾总是报错 ERROR: Timeout was reached

问题排查 尝试查看dpkg.log&#xff0c;重新安装异常的包&#xff0c;试了没用尝试清除apt缓存sudo apt clean sudo rm -rf /var/lib/apt/lists sudo apt update看到报错信息Failed to activate service org.freedesktop.PackageKit: timed out(service_start_timeout25000ms)…

学习前端第三十五天(原型继承,F.prototype,原生的原型)

一、原型继承 1、[ [ Prototype ] ]&#xff0c;对象属性 所有对象都有一个[ [ Prototype ] ] 当从object中读取一个缺失的属性时&#xff0c;JavaScript 会自动从原型中获取该属性&#xff0c;“原型继承”。 其中之一设置原型的方法&#xff0c;使用特殊的名字 __proto__&…

JavaScript 对象入门:基础用法全解析

目录 对象 语法 属性和访问 方法和调用 this关键字 null 遍历对象 内置对象 Math 属性 方法 Date 创建日期对象 获取和设置日期 ⭐对象 对象是 JavaScript 数据类型的一种&#xff0c;数据类型也包括数值类型、字符串类型、布尔类型、undefined。对象数据类型可…

mcu 常用宏定义展示

简介 MCU开发中一般有很多地方需要对寄存器进行操作。 寄存器操作 #define SET_BIT(REG, BIT) ((REG) | (BIT))#define CLEAR_BIT(REG, BIT) ((REG) & ~(BIT))#define READ_BIT(REG, BIT) ((REG) & (BIT))#define CLEAR_REG(REG) ((REG) (0x0))#de…

程序员之路:裁员与内卷下的生存之道

作为一名普通的程序员&#xff0c;身处这个瞬息万变的IT行业&#xff0c;面对着今年不断加剧的裁员浪潮和日益激烈的内卷竞争&#xff0c;我时常感到焦虑和不安。然而&#xff0c;正是这些挑战&#xff0c;让我们更加深入地思考了在这个行业中&#xff0c;我们该如何找到自己的…

wireshark_http

过滤器&#xff1a; 捕获过滤器&#xff1a;表达式作用在wireshark开始捕获数据包之前&#xff0c;只捕获符合条件的数据包&#xff0c;不记录不符合条件的数据包。 显示过滤器&#xff1a;表达式作用在在wireshark捕获数据包之后&#xff0c;从已捕获的所有数据包中显示出符…

[链表专题]力扣21, 234

1. 力扣21 : 合并两个有序链表 题 : 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a;输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] 示例 2&#xff1a;输入&#xff1a;l…

2024统计建模中国新质生产力统计测度与时空演变及其驱动因素研究

高质量成品论文46页word版本1.5w字书写完整数据集1000行py代码一等奖论文&#xff01;这里仅展示部分内容&#xff0c;完整版在下面的链接。 【1.5w字全网最佳】2024统计建模大赛高质量成品论文39页配套完整代码运行全套数据集https://www.jdmm.cc/file/2710661/ 中国新质生产…

【2024HNCTF】密码组部分出题记录

2024H&NCTF 密码组部分出题记录 题目&#xff1a;BabyPQ、HappyDance 文章目录 2024H&NCTF 密码组部分出题记录BabyPQ | 签到HappyDance BabyPQ | 签到 本题为nc交互题&#xff0c;之所以采用这种形式&#xff0c;是因为可能有很多密码新师傅们不了解这种赛题形式&a…

AI机器人火了,探讨早就可以帮我们开拓市场的中关村科金语音机器人

近期AI机器人给我们带来了不少惊喜&#xff0c;比如国外 Figuer 联合 OpenAI 做了 Chatgpt 机器人&#xff0c;可以通过对话后推理干活&#xff0c;国内仿生机器人员工也开始量产&#xff0c;看到AI机器人不禁想到会不会替代我们的工作&#xff1f;我们了解到很多机器人厂家的…

#初阶模板

目录 1.泛型编程 2.模板 &#xff08;1&#xff09;函数模板 &#xff08;2&#xff09;举个栗子&#xff08;模板的使用&#xff09; 1.模板的声明有两种形式 2.函数模板的原理 &#xff08;3&#xff09;模板参数的匹配原则 &#xff08;4&#xff09;类模板 类模板…

AI图像生成-原理

一、图像生成流程总结 【AI绘画】深入理解Stable Diffusion&#xff01;站内首个深入教程&#xff0c;30分钟从原理到模型训练 买不到的课程_哔哩哔哩_bilibili 二、如果只是用comfy UI生成图片 1、找到下面几个文件&#xff0c;把对应模型移动到对应文件夹即可使用 2、选择对…

大学c语言基础很差,能不能学51单片机?会不会很困难?

开始前我分享下我的经历&#xff0c;我刚入行时遇到一个好公司和师父&#xff0c;给了我机会&#xff0c;一年时间从3k薪资涨到18k的&#xff0c; 我师父给了一些51单片机学习方法和资料&#xff0c;让我不断提升自己&#xff0c;感谢帮助过我的人&#xff0c; 如大家和我一样…

python turtle 升国旗

​一、导语 大家好,前段时间,我们画出了五星红旗,今天我们要用Python的Turtle库来绘制一个五星红旗,并让国旗上升,让我们一起来感受编程与艺术的完美结合吧!领略国家的强大!爱祖国,做一个遵纪守法的好公民。 二、效果展示 升国旗 三、开发过程 一、准备工作 首先我们…