VUE 开发——AJAX学习(三)

一、async函数和await

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

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

html 复制代码
 <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语句:标记要尝试的语句块,并指定一个出现异常时抛出的响应

html 复制代码
<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对象,等待所有同时完成完成(或某一个失败),做后续逻辑

html 复制代码
    <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>
相关推荐
Y1nhl1 分钟前
Pyspark学习一:概述
数据库·人工智能·深度学习·学习·spark·pyspark·大数据技术
能来帮帮蒟蒻吗3 分钟前
Go语言学习(15)结构体标签与反射机制
开发语言·笔记·学习·golang
懒大王95274 分钟前
echarts+HTML 绘制3d地图,加载散点+散点点击事件
前端·html·echarts
Aphelios3803 小时前
Java全栈面试宝典:线程机制与Spring IOC容器深度解析
java·开发语言·jvm·学习·rbac
日暮南城故里4 小时前
Java学习------源码解析之StringBuilder
java·开发语言·学习·源码
斯~内克6 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
安全方案6 小时前
精心整理-2024最新网络安全-信息安全全套资料(学习路线、教程笔记、工具软件、面试文档).zip
笔记·学习·web安全
士别三日&&当刮目相看6 小时前
JAVA学习*Object类
java·开发语言·学习
数据知道6 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
dr李四维6 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数