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>
相关推荐
我要洋人死13 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人24 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人25 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR30 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香32 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969335 分钟前
前端预览word、excel、ppt
前端·word·excel
数据与后端架构提升之路37 分钟前
从神经元到神经网络:深度学习的进化之旅
人工智能·神经网络·学习
小华同学ai40 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
一行11 小时前
电脑蓝屏debug学习
学习·电脑
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js