promise 、async 、 await的意义和用法

本文深入探讨了Promise对象的创建及使用,包括通过then()和catch()方法处理异步函数的回调。同时,详细解释了async声明异步函数的作用及其如何与await结合,实现异步函数的同步执行,避免了复杂的嵌套代码。

1.获得一个promise对象很简单  new Promise () 就可以了,简单的说promise的作用就是 当一个 异步函数 执行完毕时 所进行的回调  例如:

 new Promise((resolve,reject)=>{
     setTimeout(()=>{

       resolve('成功的回调')

       reject('失败的回调')

    },2000)
}) 

这里的new  Promise是一个promise对象  可以通过在通过then()方法和catch()方法捕获到两个不同回调的值,顺便一提 axios 的值就是一个promise对象。

2.async的作用是声明一个函数为异步函数,当用了async声明后,这个函数就成了一个promise对象 ,如果这个函数有返回值,那么函数内部会把这个return 的值赋值给promise对象的PromiseValue。通过await就可以拿到这个异步返回值。当然通过then()也可以拿到。

3.await 是等待的意思,用于含有async的函数体内,可以让两个异步函数按照同步的顺序执行,也就是自上而下,依次执行。这样可以避免写过多的嵌套代码。

 

 

 

 

JavaScript 中的 `Promise`、`async` `await` 是处理异步操作的核心机制,它们的执行顺序原理与 JavaScript 的事件循环(Event Loop)微任务队列(Microtask Queue)密切相关。理解这些机制有助于编写高效、可维护的异步代码。 ### 事件循环与任务队列 JavaScript 的主线程是单线程的,所有任务都在主线程上按顺序执行。异步操作不会阻塞主线程,而是通过事件循环机制处理。任务分为宏任务(Macrotask)微任务(Microtask)两类: - **宏任务**:如 `setTimeout`、`setInterval`、`I/O` 操作等。 - **微任务**:如 `Promise.then`、`MutationObserver`、`queueMicrotask` 等。 微任务的优先级高于宏任务,在每次宏任务执行完毕后,事件循环会优先清空微任务队列。 ### Promise 的执行顺序 `Promise` 是异步编程的基础,其 `then` `catch` 方法会在当前执行栈清空后,被放入微任务队列中执行。例如: ```javascript console.log("Start"); Promise.resolve().then(() => { console.log("Promise 1"); }); console.log("End"); // 输出顺序: // Start // End // Promise 1 ``` 在上述代码中,`Promise.then` 被推入微任务队列,并在同步代码执行完毕后才执行。 ### async/await 的执行顺序 `async` 函数会返回一个 `Promise` 对象,函数内部可以使用 `await` 关键字等待异步操作完成。`await` 会暂停当前 `async` 函数的执行,直到右侧的 `Promise` 解决(resolve)或拒绝(reject)。 ```javascript async function asyncFunc() { console.log("Start async"); await Promise.resolve(); console.log("End async"); } console.log("Before async"); asyncFunc(); console.log("After async"); // 输出顺序: // Before async // Start async // After async // End async ``` 在这个例子中,`await Promise.resolve()` 将 `console.log("End async")` 推入微任务队列,因此它在同步代码执行完毕后才执行。 ### 综合示例 结合 `setTimeout`、`Promise`、`async/await`,可以更清楚地理解它们的执行顺序: ```javascript console.log("script start"); setTimeout(() => { console.log("setTimeout"); }, 0); Promise.resolve().then(() => { console.log("Promise then"); }); async function async1() { console.log("async1 start"); await async2(); console.log("async1 end"); } async function async2() { console.log("async2"); } async1(); console.log("script end"); // 输出顺序: // script start // async1 start // async2 // script end // Promise then // async1 end // setTimeout ``` 在这个示例中: - `async1()` 被调用,`async1 start` `async2` 是同步执行的。 - `await async2()` 之后的代码(`async1 end`)被放入微任务队列。 - `Promise.then` 也被放入微任务队列。 - 最后,`setTimeout` 作为宏任务被放入任务队列,在微任务队列清空后执行。 ### 原理总结 - `Promise` 的 `.then` 回调会被放入微任务队列中,在当前宏任务结束后执行。 - `await` 会将后续代码(即 `await` 之后的语句)放入微任务队列。 - 微任务优先于宏任务执行,因此 `Promise.then` `await` 后续代码会在下一个宏任务之前执行。 这些机制确保了异步操作的可预测性一致性,同时避免了阻塞主线程。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值