现代 JavaScript 参考(9)

async 操作符将一个函数标记为异步,并将始终返回一个 Promise 。你可以在 async 函数中使用 await 操作符来暂停该行代码的执行,直到表达式中返回的 Promise resolves 或 rejects 。

async function myFunc() { // 我们可以使用 *await* 操作符 因为这个函数是 异步(async) 的 return "hello world"; } myFunc().then(msg => console.log(msg)) // "hello world" -- 由于 async 操作符,myFunc 的返回值将变成了一个 promise

当异步函数运行到 return 语句时,将会使用返回的值来 fulfilled Promise。 如果在 async 函数中抛出错误,则 Promise 状态将转为 rejected 。 如果没有从 async 函数返回任何值,则在执行 async 函数完成时,仍然会返回 Promise 并 resolves 为无值。

await 操作符用于等待 Promise fulfilled ,只能在 async 函数体内使用。 遇到这种情况时,代码执行将暂停,直到 promise fulfilled。

注意: fetch 是一个允许执行 AJAX 请求,返回一个 Promise 的函数。

首先,我们来看看如何通过 promises 来获取一个 github 用户:

function getGithubUser(username) { return fetch(`https://api.github.com/users/${username}`).then(response => response.json()); } getGithubUser('mbeaudru') .then(user => console.log(user)) .catch(err => console.log(err));

等价于这里 async / await :

async function getGithubUser(username) { // promise + await 关键字使用允许 const response = await fetch(`https://api.github.com/users/${username}`); // 在此处执行停止,直到 promise 获得 fulfilled return response.json(); } getGithubUser('mbeaudru') .then(user => console.log(user)) .catch(err => console.log(err));

当你需要链接(chain)相互依赖的 promises 时,async / await 语法特别方便 。

例如,如果您需要获取一个令牌(token) ,以便能够在数据库上获取博客文章,然后获取作者信息:

注意: await 表达式需要包含在括号中,这样可以在同一行上调用其 resolved 值的方法和属性。

async function fetchPostById(postId) { const token = (await fetch('token_url')).json().token; const post = (await fetch(`/posts/${postId}?token=${token}`)).json(); const author = (await fetch(`/users/${post.authorId}`)).json(); post.author = author; return post; } fetchPostById('gzIrzeo64') .then(post => console.log(post)) .catch(err => console.log(err)); 错误处理

除非我们在 await 表达式外面包裹 try / catch 语句块,否则不会捕获异常 – 不管它们是在你的异步函数中被抛出还是在 await 期间被暂停 – 他们将 reject async 函数返回的承诺。
在 async 函数中使用 throw 语句与返回 reject 的 Promise 是相同。 .

Note : Promises 的行为相同的!

下面是的示例显示了 promises 是如何处理错误链的:

function getUser() { // 这个 promise 将被 rejected! return new Promise((res, rej) => rej("User not found !")); } function getAvatarByUsername(userId) { return getUser(userId).then(user => user.avatar); } function getUserAvatar(username) { return getAvatarByUsername(username).then(avatar => ({ username, avatar })); } getUserAvatar('mbeaudru') .then(res => console.log(res)) .catch(err => console.log(err)); // "User not found !"

等价于实用 async / await :

async function getUser() { // 这个 promise 将被 rejected! throw "User not found !"; } async function getAvatarByUsername(userId) => { const user = await getUser(userId); return user.avatar; } async function getUserAvatar(username) { var avatar = await getAvatarByUsername(username); return { username, avatar }; } getUserAvatar('mbeaudru') .then(res => console.log(res)) .catch(err => console.log(err)); // "User not found !" 扩展阅读 真值/假值(Truthy / Falsy)

在 JavaScript 中,truthy 或 falsy 值是在布尔上下文中求值时被转换为布尔值的值。布尔上下文的一个最常见的例子是求值 if 条件:

每个值将被转换为true,除非它们等于以下值:

false

0

"" (空字符串)

null

undefined

NaN

下面是 布尔上下文(boolean context) 的例子:

if 条件求值

if (myVar) {}

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wywxjf.html