时间戳

首页 > 解决方案 > 在 Javascript 异步函数之外访问 JSON 数组元素

javascript - 在 Javascript 异步函数之外访问 JSON 数组元素

问题描述

我有以下脚本：

async function getJobs () {
    const response = await fetch('https://redhat.jobs/jobs/feed/json');
    json = await response.json();
    console.log("inside getJobs fuction " + json);
}

jobs = getJobs();
console.log("outside getJobs function" + jobs);

第一个 console.log 显示了我期望的 json 响应。outside getJobs function[object Promise]但是，我在控制台中看到了第二个日志。

我认为这里发生的事情是我需要等待getJobs 运行/完成，然后再将结果分配给jobs变量？或者我的方法一开始就完全错误。

只是为了提供更多上下文，我希望 getJobs 一次，然后我想用应用程序中的作业数组做一些事情。

标签： javascriptasynchronousasync-await

解决方案

fetch(url)并且response.json()都返回一个 Promise。你可以用 Promises 做的是使用一个.then()语句。这允许您在 Promise 解决后执行一些代码。关于您上面的代码，您会注意到，如果您按原样运行它，您会得到：

"outside getJobs function[object Promise]"
"inside getJobs fuction [object Object], [object Object], ..."

这是因为getJobs()返回一个 Promise。所以：

jobs = getJobs();
console.log("outside getJobs function" + jobs);

console.log()在收到来自 的 Promise 后立即执行getJobs()。只有当 Promise 被解决时，你才会得到任何有用的东西，所以你要确保你console.log()只在Promise 被解决后才调用。

您可以通过使用.then()语句来做到这一点。在此处了解有关它们的更多信息。这使您可以同步处理此代码。你甚至不必担心异步（在我看来，getJobs()当 Promise 链接可以很好地完成工作时，这会使代码更加混乱）。我会像这样实现上面的：

function getJobs() {
    var result = fetch('https://redhat.jobs/jobs/feed/json');
    console.log('result inside getJobs is a Promise')
    return(result)
}

getJobs().then(function(response){
  return response.json();
  })
  .then(function(jobs){
  console.log('result after promise chain is ' + jobs)
  }
);

推荐阅读