首页 >web前端 >js教程 >如何在 JavaScript 中等待异步函数并返回值?

如何在 JavaScript 中等待异步函数并返回值?

Susan Sarandon
Susan Sarandon原创
2024-11-11 10:43:03591浏览

How to Await and Return Values from Async Functions in JavaScript?

如何从异步函数等待并返回值

使用异步函数时,返回值可能与同步函数不同。在本文中,我们将探讨如何使用 async-await 处理此行为。

问题:

假设您有一个异步函数 getData 从使用 Axios 的 API。要检索数据并记录它,请尝试以下代码:

const axios = require('axios');
async function getData() {
    const data = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return data;
}
console.log(getData());

但是,您没有记录数据,而是得到一个处于挂起状态的 Promise。

解决方案:

这里的问题是您试图等待异步作用域之外的异步函数的结果。要解决此问题,您需要将 console.log 封装在异步 IIFE(立即调用函数表达式)中:

async function getData() {
    const data = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return data;
}

(async () => {
    const result = await getData();
    console.log(result);
})();

此模式允许您在异步范围内等待 getData 函数的结果。

替代语法:

如果您的异步函数不依赖于返回 Promise(例如,Axios 返回 Promise),您可以通过删除 async 来简化语法并等待 getData 中的关键字。

function getData() {
    return axios.get('https://jsonplaceholder.typicode.com/posts');
}

然后,使用与之前相同的 IIFE 结构来等待结果:

(async () => {
    console.log(await getData());
})();

更多信息:

有关 JavaScript 中的 async/await 和异步编程的更多详细信息,请参阅以下资源:

  • [JavaScript 中的 Async/Await](https://developer.mozilla.org/en -US/docs/Web/JavaScript/Reference/Operators/async_function)
  • [JavaScript 中的异步编程](https://javascript.info/async-await)

以上是如何在 JavaScript 中等待异步函数并返回值?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn