promise、async事件循环机制,你是CV工程师?

简介: promise、async事件循环机制,你是CV工程师?

在面试的过程中如果不了解promise、async事件循环机制基本就会认为你是CV工程师

首先分析 async/await 其实是基于promise实现的,async 函数其实就是把 promise 做了一个包装

promise 是es6的语法,async/await 是es7的语法糖,所以我们先来分析一下 事件循环机制

事件循环机制

1.事件循环机制是为解决单线程代码执行不阻塞主进程一种机制,也就是我们所说的异步原理

2.因为JavaScript是单线程,事件循环机制是为了解决单线程阻塞、从上往下执行。执行完毕 => 判断是否微任务 => 判断是否有宏任务

3.整体的script(作为第一个宏任务)开始执行的时候,会把所有代码分为两部分:“同步任务”、“异步任务”;

  • 宏任务
    setInterval()
    setTimeout()
  • 微任务
    new Promise()后的.then与.catch函数
    async/await

1.promise里的then才会被加入微任务,他的resolve,是同步里的。

2.而async函数里遇到await之前的代码是同步里的,遇到await时,会执行await后面的函数,然后返回一个promise,把await下面的代码放入微任务,并且退出这个async函数。

-通俗易懂:

同步:一件事做完了才到另一件事(如果上一件事情没做完,就会一直卡在这里所以造成了阻塞)

异步:在做一件事请,这件事还没做完就开始做另一件事(互不影响,可以一起做事情)

promise

  • Promise,简单说就是一个容器,在里面进行处理出结果(成功或失败)。
  • Promise 一共有三种状态
    1.pending 初始状态
    2.fulfilled 成功状态
    3.rejected 失败状态
new Promise((resolve,reject) => {
    .then((data) => {               //接收传输成功的数据
        console.log(data);    
    })
    .catch((err) => {               //接收请求失败的数据
        console.log(err);         
    })
    .finally((all) => {            // 无论成功失败都会执行
        console.log(all);
    })

Promise.resolve

将传递给它的参数填充 Fulfilled 到 Promise 对象后并返回这个 Promise 对象。

Promise.reject

它的功能是调用该 Promise对象通过then指定的 onRejected函数,并讲错误(Error)对象传递给这个onRejected函数

Promise.then

异步调用方式

Promise.all

1.如果所有的Promise中有一个错误,走的是Promise.all().catch()这个。但是不影响其他 Promise 还是会正常执行,但不会返回结果

2.特性:接受一个promise 对象的数组作为参数,同时开始、并行执行的,可以执行多个

Promise.allSettled

1.Promise.allSettled()在你需要执行平行和独立的异步操作并收集所有结果时非常有效, 即使某些异步操作可能失败。

2.特性:接受一个promise 对象的数组作为参数、同时开始、并行执行的,可以执行多个、但不会走catch

Promise.rece

1.特性:接受一个promise 对象的数组作为参数、同时开始、并行执行的,可以执行多个

这里我们重点理一下 Promise.rece 和 Promise.all() 的区别

Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的

Promse.race是里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。

亿点小知识:Promise本身是同步执行,.then是异步执行的

async / await

  • async/await 其实是基于promise实现的,async 函数其实就是把 promise 做了一个包装
    为什么那么说呢 我们看一下代码
async function Methods(){
    return "内容值"
}
/*
async 自动包装成Promise对象,等于
function Methods(){
    return new Promise((resolve) => {resolve("内容值")})
}
*/

总结:

共同点:两者都是处理异步请求的方式

不同点:

  • promise是返回的对象要用then().catch()去处理数据和捕获异常,而且书写方式是链式的,容易造成代码多层堆叠难以维护;
  • async await 则是通过try{}.cathc{}进行捕获直接抛出异常

以上就是《web面试—倚天屠龙》感谢大家的阅读

如碰到其他的问题 可以私下我 一起探讨学习

如果对你有所帮助还请 点赞 收藏谢谢~!

关注收藏博客 作者会持续更新…

相关文章
|
5月前
|
前端开发 JavaScript 开发者
前端开发中的异步编程:Promise 和 Async/Await 的比较与应用
在现代前端开发中,异步编程是不可或缺的技术。本文将深入探讨Promise和Async/Await这两种主流的异步编程方式,分析它们的优劣势及在实际项目中的应用场景。通过比较它们的语法、可读性和错误处理机制,帮助开发者更好地选择和理解如何在项目中高效地利用这些技术。
|
14天前
|
前端开发 JavaScript 开发者
Async 和 Await 是基于 Promise 实现
【10月更文挑战第30天】Async和Await是基于Promise实现的语法糖,它们通过简洁的语法形式,借助Promise的异步处理机制,为JavaScript开发者提供了一种更优雅、更易于理解和维护的异步编程方式。
22 1
|
14天前
|
JSON 前端开发 JavaScript
浅谈JavaScript中的Promise、Async和Await
【10月更文挑战第30天】Promise、Async和Await是JavaScript中强大的异步编程工具,它们各自具有独特的优势和适用场景,开发者可以根据具体的项目需求和代码风格选择合适的方式来处理异步操作,从而编写出更加高效、可读和易于维护的JavaScript代码。
21 1
|
1月前
|
前端开发 JavaScript
setTimeout、Promise、Async/Await 的区别
`setTimeout` 是用于延迟执行函数的简单方法;`Promise` 表示异步操作的最终完成或失败;`Async/Await` 是基于 Promise 的语法糖,使异步代码更易读和维护。三者都用于处理异步操作,但使用场景和语法有所不同。
|
1月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:深入了解 Promise 和 async/await
【10月更文挑战第8天】JavaScript 中的异步编程:深入了解 Promise 和 async/await
|
1月前
|
前端开发 JavaScript UED
深入了解JavaScript异步编程:回调、Promise与async/await
【10月更文挑战第11天】深入了解JavaScript异步编程:回调、Promise与async/await
15 0
|
2月前
|
前端开发 JavaScript
解决异步问题,教你如何写出优雅的promise和async/await,告别callback回调地狱!
该文章教授了如何使用Promise和async/await来解决异步编程问题,从而避免回调地狱,使代码更加清晰和易于管理。
解决异步问题,教你如何写出优雅的promise和async/await,告别callback回调地狱!
|
6月前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
92 0
|
4月前
|
前端开发 JavaScript
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
140 1
|
3月前
|
前端开发 JavaScript 开发者
探索前端开发中的异步编程:Promise与Async/Await
在现代前端开发中,处理异步操作是至关重要的。本文将深入探讨异步编程的核心概念,重点比较JavaScript中的Promise与Async/Await两种异步编程方式。通过实例和比较,读者将能够理解这两种方法的优缺点,如何在实际开发中选择适合的异步编程模式,从而编写更简洁、可维护的代码。