VUE 开发——AJAX学习(三)

news2024/9/30 7:55:42

一、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.coloradmin.cn/o/2179102.html

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

相关文章

Ubuntu 安装 Docker Compose

安装Docker Compose # 删除现有的 docker-compose&#xff08;如果存在&#xff09; sudo rm -f /usr/local/bin/docker-compose ​ # 下载最新的 docker-compose 二进制文件 sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-…

Visual Studio-X64汇编编写

纯64位汇编&#xff1a; includelib ucrt.lib includelib legacy_stdio_definitions.lib includelib user32.libextern printf:proc extern MessageBoxA:proc.data szFormat db "%s",0 szHello db "HelloWorld",0 szRk db "123",0.code start p…

Linux下驱动开发实例

驱动开发 驱动与硬件的分离 在传统的嵌入式系统开发中&#xff0c;硬件信息往往是直接硬编码在驱动代码中的。这样做的问题是&#xff0c;当硬件发生变化时&#xff0c;比如增加或更换设备&#xff0c;就需要修改驱动程序的代码&#xff0c;这会导致维护成本非常高。因此&…

C++队列、双向队列

前言 C算法与数据结构 打开打包代码的方法兼述单元测试 队列 队列&#xff08;Queue&#xff09;是一种基本的线性数据结构&#xff0c;它遵循先进先出&#xff08;First In First Out, FIFO&#xff09;的原则。这意味着最先被添加到队列中的元素将会是最先被移除的。和生活…

Vue 3 魔法揭秘:CSS 解析与 scoped 背后的奇幻之旅

文章目录 一、背景二、源码分析transformMain 返回值transformStyle 方法compileStyleAsync 方法scopedPlugin 方法template 添加 __scopeId 三、总结 一、背景 Vue 3 文件编译流程详解与 Babel 的使用 上文分析了 vue3 的编译过程&#xff0c;但是在对其中样式的解析遗留了一…

方舟开发框架(ArkUI)可运行 OpenHarmony、HarmonyOS、Android、iOS等操作系统

ArkUI 是华为开发的一套声明式 UI 开发框架&#xff0c;用于构建分布式应用界面。ArkUI-X 是对 ArkUI 框架的扩展&#xff0c;支持开发者使用一套代码构建支持多平台&#xff08;包括 OpenHarmony、HarmonyOS、Android、iOS&#xff09;的应用。 一、方舟开发框架的ArkUI-X Ark…

libcrypto.so.10内容丢失导致sshd无法运行

说明: 我的是centos的服务器,被扫出有ssh漏洞,需要升级到OpenSSH_9.8p1, OpenSSL 3.0.14 4 报错 我的系统和环境升级前的版本 这是升级之后的版本 OpenSSH_9.8p1, OpenSSL 3.0.14 4 解决:我这个的原因是升级的时候把这个文件给删除了, 复制旧服务器上的 libcrypto.so.1…

【C++单调队列】1438. 绝对差不超过限制的最长连续子数组|1672

本文时间知识点 C队列、双向队列 LeetCode1438. 绝对差不超过限制的最长连续子数组 给你一个整数数组 nums &#xff0c;和一个表示限制的整数 limit&#xff0c;请你返回最长连续子数组的长度&#xff0c;该子数组中的任意两个元素之间的绝对差必须小于或者等于 limit 。 如…

Python 复制PDF中的页面

操作PDF文档时&#xff0c;复制其中的指定页面可以帮助我们从PDF文件中提取特定信息&#xff0c;如文本、图表或数据等&#xff0c;以便在其他文档中使用。复制PDF页面也可以实现在不同文件中提取页面&#xff0c;以创建一个新的综合文档。 本文将介绍如何使用Python 在同一文档…

Linux 计划任务

1.常见定时计划任务设置方式&#xff1a; at&#xff1a; 突发性的&#xff0c;临时决定只执行一次的任务。 crontab&#xff1a; 定时性的&#xff0c;每隔一定的周期就需要重复执行一次的命令。 用#date 为参考时间 1.1 at 计划任务的使用&#xff1a; 使用…

1.8 软件业务测试

欢迎大家订阅【软件测试】 专栏&#xff0c;开启你的软件测试学习之旅&#xff01; 文章目录 前言1 概述2 方法3 测试策略4 案例分析 前言 在软件开发生命周期中&#xff0c;业务测试扮演着至关重要的角色。本文详细讲解了业务测试的定义、目的、方法以及测试策略。 本篇文章参…

Apache Iceberg Architecture—Iceberg 架构详解

Apache Iceberg Architecture Apache Iceberg 的架构可以分为三个主要层次&#xff1a;Iceberg Catalog、元数据层和数据层。 一、 Iceberg Catalog&#xff08;目录&#xff09; Iceberg Catalog 是 Iceberg 的顶层组件&#xff0c;负责管理所有 Iceberg 表的元数据和元数据操…

828华为云征文 | 智能监控新篇章,Prometheus如何在华为云Flexusx容器环境中大展身手

前言 在数字化转型的浪潮中&#xff0c;智能监控成为企业IT战略的关键环节。部署在华为云Flexus X实例上的Prometheus监控系统&#xff0c;凭借其卓越的性能与灵活性&#xff0c;正开启智能监控的新篇章。Flexus X实例以其强大的计算能力和灵活的资源管理&#xff0c;为Prometh…

I/O中断处理过程

中断优先级包括响应优先级和处理优先级&#xff0c;响应优先级由硬件线路或查询程序的查询顺序决定&#xff0c;不可动态改变。处理优先级可利用中断屏蔽技术动态调整&#xff0c;以实现多重中断。下面来看他们如何运用在中断处理过程中&#xff1a; 中断控制器位于CPU和外设之…

phpstudy简易使用

注意&#xff0c;本文所述的操作步骤均建立在电脑上已经完成php环境变量的配置与vscode的安装之上 、

万界星空科技数字孪生:解锁制造业未来,重塑智慧工厂新纪元

万界星空科技的数字孪生技术是一项创新的技术解决方案&#xff0c;它深度融合了工业大数据、物联网&#xff08;IoT&#xff09;、人工智能&#xff08;AI&#xff09;等先进技术&#xff0c;为制造业工厂提供了一个高度智能化、可视化的运营管理系统。以下是对万界星空科技数字…

EXEAL无法使用宏处理办法

在打开exeal的时候如果提示无法使用宏&#xff0c;或者不显示宏&#xff0c;可能是因为以下几个权限没有打开 1.随便打开一个exeal选择文件 2.选择更多里面的选项 3.选择信任中心里面的信任中心设置 4.信任中心宏设置启用所有宏 5.如果是网盘等其他路径的文件&#xff0c;点击…

leetcode-链表篇4

leetcode-2 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数都…

VUE 开发——Node.js学习

一、认识Node.js Node.js是一个跨平台JavaScript运行环境&#xff0c;使开发者可以搭建服务器端的JavaScript应用程序 使用Node.js编写服务器端程序——编写数据接口、前端工程化&#xff1b; Node.js环境没有BOM和DOM&#xff1b; Node.js安装&#xff1a;下载node-v16.19…

C#基于SkiaSharp实现印章管理(10)

向PDF文件插入印章图片比之前实现的向图片文件插入印章麻烦得多。   最初的想法是使用PDF浏览控件在线打开PDF文件&#xff0c;然后在控件中实现鼠标移动时动态显示印章&#xff0c;点击鼠标时向当前PDF页面的鼠标点击位置插入图片。由于是.net 8的Winform项目&#xff0c;选…