VUE 开发——AJAX学习(三)

一、async函数和await

async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用Promise

async写在函数声明的前面;在async函数内,使用await关键字,获取Promise对象“成功状态”结果值

 <script>
        //注意:await必须用在async修饰的函数内(await会阻止“异步函数内”代码继续执行,原地等待结果)
        //1.定义一个async修饰函数
        async function getData() {
            //2.await等待Promise对象成功的结果
            const pObj = await axios({url:'http://hmajax.itheima.net/api/province'})
            const pname = pObj.data.list[0]
        }

        getData()
    </script>

捕获错误

使用try……catch语句:标记要尝试的语句块,并指定一个出现异常时抛出的响应

<script>
        async function getData() {
            //1.try包装可能产生错误的代码
            try {
            const pObj = await axios({url:'http://hmajax.itheima.net/api/province'})
            const pname = pObj.data.list[0]
            } catch(error) {
            //2.接着调用catch块,接收错误信息
            //dir可以看到错误信息
            console.dir(error)
            }
           
        }
        getData()
</script>

二、事件循环(EventLoop)

 概念:事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。

定义:执行代码和收集异步任务的模型,在调用栈空闲,反复调用任务队列里回调函数的执行机制

三、宏任务与微任务

异步任务分为:

  • 宏任务:由浏览器环境执行的异步代码
  • 微任务:由JS引擎环境执行的异步代码
任务(代码)执行所在环境
JS脚本执行事件(script)浏览器
setTimeout/setInterval浏览器
AJAX请求完成事件浏览器
用户交互事件等浏览器
Promise对象.then()JS引擎

先执行同步代码,再是微任务,最后是宏任务

四、Promise.all静态方法

概念:合并多个Promise对象,等待所有同时完成完成(或某一个失败),做后续逻辑

 

    <script>
        /**
        * 掌握Promise的all方法作用和使用场景
        */
       //1.得到Promise对象
       const bjPromise = axios({url: '',params: { city: '110100'}})
       const shPromise = axios({url: '',params: { city: '310100'}})
       const gzPromise = axios({url: '',params: { city: '440100'}})
       const szPromise = axios({url: '',params: { city: '440300'}})
        //2.使用Promise.all,合并多个Promise对象
        const p = Promise.all([bjPromise,shPromise,gzPromise,szPromise])
        p.then(result => {
            console.log(result)
        }).catch(error => {
            console.dir(error)
        })
    </script>

 

 

 

 

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

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

相关文章

身份证号、定位信息等个人信息敏感性判定解析

关于身份证号号码以及精确定位信息是否是敏感个人信息的疑问一直以来不少合规安全从业者有疑惑&#xff0c;本文来自于《数安标准强基助力计划 》作者为指南和标准的起草者&#xff0c;其观点具有一定的权威性&#xff0c;一下为内容摘要&#xff0c;以供大家学习和解惑&#x…

Qt多线程操作sqlite数据库

问题 就是为了多线程操作sqlite数据库,为什么,因为数据库是耗时的操作,一条数据的插入,差不多200ms,如果是数据插入多了,界面会有明显的卡顿,因此必须,多线程操作数据库。 问题是这样的: 插入数据之后,接着更新界面;然而,插入数据是比较耗时的操作,尤其插入数据…

图解C#高级教程(一):委托

什么是委托 可以认为委托是持有一个或多个方法的对象。但它与对象不同&#xff0c;因为委托可以被执行。当执行委托时&#xff0c;委托会执行它所“持有”的方法。先看一个完整的使用示例。 // See https://aka.ms/new-console-template for more informationdelegate void M…

【Git原理与使用】Git初识基本操作

Git初识&&基本操作 1.初识Git2.Git安装3.Git基本操作3.1创建Git本地仓库3.2配置Git3.3认识工作区、暂存区、版本库3.4添加文件3.5修改文件3.6版本回退3.7撤销修改3.8删除文件 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f…

Vscode超好看的渐变主题插件

样式效果&#xff1a; 插件使用方法&#xff1a; 然后重启&#xff0c;之后会显示vccode损坏&#xff0c;不用理会&#xff0c;因为这个插件是更改了应用内部代码&#xff0c;直接不再显示即可。

基于nodejs+vue的游戏陪玩系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

银河麒麟服务器:更新软件源

银河麒麟服务器&#xff1a;更新软件源 1、使用场景2、操作步骤3、注意事项 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 1、使用场景 当需要安装最新软件或修改软件源配置后&#xff0c;需更新软件源以获取最新软件包信息。 2、操作步…

京东PMO段敬受邀为第四届中国项目经理大会演讲嘉宾

全国项目经理专业人士年度盛会 京东集团技术委员会PMO组研发项目经理段敬女士受邀为PMO评论主办的全国项目经理专业人士年度盛会——2024第四届中国项目经理大会演讲嘉宾&#xff0c;演讲议题为“项目经理如何组织高效的项目会议”。大会将于10月26-27日在北京举办&#xff0c;…

亚信安全天穹5分钟勒索体检 免费试用今起上线

对于勒索攻击的认知 你是否还停留在“2.0时代”&#xff1f; 勒索攻击无疑是企业面临的最大威胁&#xff0c;2024年上半年&#xff0c;勒索组织数量同步增长超过50%&#xff0c;勒索攻击数量也持续攀升&#xff0c;平均勒索赎金突破520万美元。 当前&#xff0c;勒索攻击治理…

java学习-idea编辑器基础使用设置

首先打开电脑中的idea编辑器&#xff0c;点击头部&#xff1a;File按钮 → Settings… 打开设置界面&#xff1b; 设置idea的主题 设置idea代码注释的字体颜色 设置idea编辑器的字体和字体大小 设置idea通过提示回车自动导入包 设置idea输入忽略大小写进行提示

【Hadoop】【vim编辑器】【~/.bashrc 文件】如何编辑

1. 进入 vim 编辑器 在终端中输入以下命令&#xff1a; vim ~/.bashrc 2. 进入插入模式 打开文件后&#xff0c;你将处于普通模式。在普通模式下&#xff0c;你不能直接编辑文本。 要进入插入模式&#xff0c;请按下 i 键。这时&#xff0c;你应该会看到屏幕底部出现 -- 插…

fish-speech语音大模型本地部署

文章目录 fish-speech模型下载编译部署 小结 fish-speech模型 先说下fish-speech模型吧&#xff0c;可以先看下官网。如下&#xff1a; 这就是一个模型&#xff0c;可以根据一个样例声音&#xff0c;构建出自己需要的声音。其实&#xff0c;这个还是有很多用途的&#xff1b;…

多模态人像编辑:PortraitGen将2D肖像视频提升到4D 高斯场

这篇文章《Portrait Video Editing Empowered by Multimodal Generative Priors》&#xff0c;作者是来自中国科学技术大学。文章介绍了一种名为PortraitGen的肖像视频编辑方法&#xff0c;它使用多模态生成先验来实现一致性和富有表现力的风格化编辑。 文章地址&#xff1a;P…

匿名管道 Linux

管道 首先自己要用用户层缓冲区&#xff0c;还得把用户层缓冲区拷贝到管道里&#xff0c;&#xff08;从键盘里输入数据到用户层缓冲区里面&#xff09;&#xff0c;然后用户层缓冲区通过系统调用&#xff08;write&#xff09;写到管道里&#xff0c;然后再通过read系统调用&…

[Docker学习笔记]利用Dockerfile创建镜像

Dockerfile 指令 指令作用from继承基础镜像maintainer镜像制作者信息(可缺省)run用来执行shell命令expose暴露端口号cmd启动容器默认执行的命令entrypoint启动容器真正执行的命令volume创建挂载点env配置环境变量add复制文件到容器copy复制文件到容器workdir设置容器的工作目录…

APISIX 联动雷池 WAF 实现 Web 安全防护

Apache APISIX 是一个动态、实时、高性能的云原生 API 网关&#xff0c;提供了负载均衡、动态上游、灰度发布、服务熔断、身份认证、可观测性等丰富的流量管理功能。 雷池是由长亭科技开发的 WAF 系统&#xff0c;提供对 HTTP 请求的安全请求&#xff0c;提供完整的 API 管理和…

VUE 整合 ECharts

一、vue 引入 ECharts依赖 npm install echarts --save 二、创建盒子 <div ref"chars" style"height: 500px;width:800px;"></div> 解释说明 ref"chars" 是 Vue.js 中一个非常有用的特性&#xff0c;用于给 DOM 元素或组件实例…

二值图像的面积求取的两种方法及MATLAB实现

一、引言 面积在数字图像处理中经常用到&#xff0c;在MATLAB中&#xff0c;计算二值图像的面积通常可以通过两种主要方法实现&#xff1a;遍历法和直接利用bwarea函数。下面将分别介绍这两种方法的原理和相应的MATLAB代码示例。 二、遍历法计算二值图像面积的原理和MATLAB代码…

一条sql在MySQL中是怎么执行的

目录 一、MySQL总体架构二、各层的作用1、连接层2、应用层3、存储引擎层 一、MySQL总体架构 作为常问八股文&#xff0c;相信不少小伙伴当年都被问到过这个问题&#xff0c;回答这个问题我们首先得知道MySQL服务器基本架构&#xff0c;主要分为连接层&#xff0c;应用层和存储…

YOLOv7改进:Unified-loU,用于高品质目标检测的统一loU ,2024年8月最新IoU

💡💡💡现有IoU问题点:IoU (Intersection over Union)作为模型训练的关键,极大地显示了当前预测框与Ground Truth框之间的差异。后续研究者不断在IoU中加入更多的考虑因素,如中心距离、纵横比等。然而,仅仅提炼几何差异是有上限的;而且新的对价指数与借据本身存在潜在…