【问题标题】:Retrieve return values from async function从异步函数中检索返回值
【发布时间】:2021-02-21 23:12:23
【问题描述】:

我试图将异步 getData() 函数中的“carparkData”传递给 addData() 函数,但它有错误。这是 js-html-css 堆栈的一部分。希望能得到一些帮助,以便我能够从“总手数”中删除零值。提前致谢! :)

async function getData() {
    try {
        const response = await fetch ("https://api.data.gov.sg/v1/transport/carpark-availability");
        if (response.ok) {
            const data = await response.json();
            const carparkData = data.items[0].carpark_data;
        }
        return carparkData;
    } catch (error) {console.log(error);}
};
getData();


function addData() {
    var table = document.getElementById("myTable")
    for (var i = 0; i < carparkData.length; i++){
        var x = (carparkData[i].carpark_info[0].total_lots - carparkData[i].carpark_info[0].lots_available) / (carparkData[i].carpark_info[0].total_lots)              
        var utiRate = Number(x).toLocaleString(undefined, { style: 'percent', minimumFractionDigits: 2 })
        var row = `<tr>
                        <td>${carparkData[i].carpark_number}</td>
                        <td>${carparkData[i].update_datetime}</td>
                        <td>${carparkData[i].carpark_info[0].lots_available}</td>
                        <td>${carparkData[i].carpark_info[0].lot_type}</td>
                        <td>${carparkData[i].carpark_info[0].total_lots}</td>
                        <td>${utiRate}</td>
                  </tr>`
        table.innerHTML += row
    }
};
addTable(carparkData);

【问题讨论】:

  • const carparkData 不在您的 return 声明范围内

标签: javascript async-await


【解决方案1】:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

async 和 await 关键字启用异步、基于 Promise 的行为,因此 getData() 将返回一个 Promise,您必须附加 .then,因为工作完成后将返回数据。

https://jsfiddle.net/cse_tushar/9q4dL71b/7/

async function getData() {
  try {
    const response = await fetch("https://api.data.gov.sg/v1/transport/carpark-availability");
    if (response.ok) {
      const data = await response.json();
      return data.items[0].carpark_data;
    }
  } catch (error) {
    console.log(error);
  }
};

getData()
  .then(carparkData => {
    console.log(carparkData); 
    if (carparkData) {
      // logic here 
      addTable(carparkData); // ---> call here
    }
  })
  .catch(err => {
    console.log(err);
  });

代码的另一个问题

const 是块作用域的,你不能在块外使用它。

if (response.ok) {
    const data = await response.json();
    const carparkData = data.items[0].carpark_data;
}
return carparkData; // you can't use carparkData as it is not available outside the if block.

【讨论】:

    猜你喜欢
    • 2023-03-19
    • 2022-01-14
    • 1970-01-01
    • 2020-09-12
    • 2018-04-09
    • 2021-03-04
    • 2020-07-29
    • 2018-08-12
    相关资源
    最近更新 更多