JS中如何使用Promise和async await

JS中如何使用Promise和async await

HarmonyOS
2024-06-11 20:26:03
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
savan

Promise 术语

Promise 有三种状态:

  •  待定(pending):初始状态,既没有被兑现,也没有被拒绝。这是调用 fetch() 返回 Promise 时的状态,此时请求还在进行中。
  • 已兑现(fulfilled):意味着操作成功完成。当 Promise 完成时,它的 then() 处理函数被调用。
  • 已拒绝(rejected):意味着操作失败。当一个 Promise 失败时,它的 catch() 处理函数被调用。

注意,这里的“成功”或“失败”的含义取决于所使用的 API:例如,fetch() 认为服务器返回一个错误(如404 Not Found)时请求成功,但如果网络错误阻止请求被发送,则认为请求失败。

有时用已敲定(settled) 这个词来同时表示已兑现(fulfilled) 和已拒绝(rejected) 两种情况。

如果一个 Promise 处于已决议(resolved)状态,或者它被“锁定”以跟随另一个 Promise 的状态,那么它就是已兑现(fulfilled)。

合并使用多个 Promise

当某个操作由几个异步函数组成,而且开发者需要在开始下一个函数之前完成之前每一个函数时,开发者需要的就是 Promise 链。但是在其他的一些情况下,开发者可能需要合并多个异步函数的调用,Promise API 为解决这一问题提供了帮助。

有时开发者需要所有的 Promise 都得到实现,但它们并不相互依赖。在这种情况下,将它们一起启动然后在它们全部被兑现后得到通知会更有效率。这里需要 Promise.all()方法。它接收一个 Promise 数组,并返回一个单一的 Promise。

由Promise.all()返回的 Promise:

  •  当且仅当数组中所有的 Promise 都被兑现时,才会通知 then() 处理函数并提供一个包含所有响应的数组,数组中响应的顺序与被传入 all() 的 Promise 的顺序相同。
  • 会被拒绝——如果数组中有任何一个 Promise 被拒绝。此时,catch() 处理函数被调用,并提供被拒绝的 Promise 所抛出的错误。

async 和 await

async关键字为开发者提供了一种更简单的方法来处理基于异步 Promise 的代码。在一个函数的开头添加 async,就可以使其成为一个异步函数。

async function myFunction() { 
  // 这是一个异步; 
}

在异步函数中,可以在调用一个返回 Promise 的函数之前使用await 关键字。这使得代码在该点上等待,直到 Promise 被完成,这时 Promise 的响应被当作返回值,或者被拒绝的响应被作为错误抛出。这使我们能够编写像同步代码一样的异步函数。

开发者可能会在需要使用 Promise 链地方使用 async 函数,这也使得 Promise 的工作更加直观。

记住,就像一个 Promise 链一样,await 强制异步操作以串联的方式完成。如果下一个操作的结果取决于上一个操作的结果,这是必要的,但如果不是这样,像 Promise.all() 这样的操作会有更好的性能。

小结

Promise 是现代 JavaScript 异步编程的基础。它避免了深度嵌套回调,使表达和理解异步操作序列变得更加容易,并且它们还支持一种类似于同步编程中 try...catch 语句的错误处理方式。

async 和 await 关键字使得从一系列连续的异步函数调用中建立一个操作变得更加容易,避免了创建显式 Promise 链,并允许开发者像编写同步代码那样编写异步代码。

分享
微博
QQ
微信
回复
2024-06-12 17:02:10
相关问题
js api select组件如何使用
5797浏览 • 2回复 已解决
JS API web组件 怎么使用
4030浏览 • 1回复 待解决
使用Promise实现一种串行调用方式
437浏览 • 1回复 待解决
JS UI框架FAPA的page之间如何通信?
1792浏览 • 1回复 待解决
TSJS哪个使用起来更好
1016浏览 • 2回复 已解决
使用js语言如何开发相机
1792浏览 • 1回复 待解决
鸿蒙js 如何使用动态style
6243浏览 • 1回复 待解决
鸿蒙的promise要怎么写
6242浏览 • 3回复 待解决
如何js文件引入自定义js文件
6381浏览 • 1回复 待解决
如何在openharmony执行js脚本
1504浏览 • 0回复 待解决
鸿蒙上如何使用js的protobuf
2611浏览 • 1回复 待解决
创建的JS项目如何使用webview?
3498浏览 • 1回复 待解决
如何在ets引入zlib.js
1449浏览 • 1回复 待解决
napi_queue_async_work 处理机制
518浏览 • 1回复 待解决
JSBind 如何调用 JS 方法的 callback
688浏览 • 1回复 待解决