Javascript 异步函数控制台记录返回的数据

2022-01-19 00:00:00 function return json asynchronous javascript

如何控制日志 - 或对异步函数内部返回的数据执行任何操作?

How can I console log - or do any thing with the data returned from inside an async function?

示例:JS文件:

   async function getData(){
      try {
         $.getJSON('./data.json', (data) => {
            return data;
         });
      } catch(error) {
         console.log("error" + error);
      } finally {
         console.log('done');
      }
   }

   console.log(getData());

JSON 文件:

{
   "stuff": {
      "First": {
         "FirstA": {
            "year": [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
            "Categories": ["Suspension", "Electrical", "Performance", "Motor"]
         },
         "FirstB": {
            "year": [2007, 2008, 2009, 2010, 2011, 2012],
            "Categories": ["Suspension", "Electrical", "Performance", "Motor"]
         }
      },
      "Second": {
         "SecondA": {
            "year": [2002, 2003, 2004, 2005, 2006],
            "Categories": ["Suspension", "Electrical", "Performance", "Motor"]
         },
         "SecondB": {
            "year": [2007, 2008, 2009, 2010, 2011, 2012],
            "Categories": ["Suspension", "Electrical", "Performance", "Motor"]
         }
      }
   }
}

如何返回/访问 JSON 文件中的所有信息并使用它.例如，我想将First"和Second"添加到 div 中.与FirstA"和FirstB"以及SecondA"和SecondB"相同......等等.

How can I return / get access to all the information in the JSON file and work with it. for example I'd like to take the "First" and "Second" and add them to a div. Same with "FirstA" and "FirstB" and "SecondA" and "SecondB"...and so on.

目前，我得到 Promise {: undefined}

Right now as it stands, I get Promise {: undefined}

任何帮助将不胜感激.

---------更新---------

---------UPDATE---------

如果我在函数内部运行控制台日志，我可以看到 json 数据，但我需要访问函数外部的数据.

If I run the console log inside the function I then can see the json data, but I need access to the data outside the function.

谢尔盖

推荐答案

两个问题:

  1. 要设置 async 函数创建的promise 的分辨率值，您必须使用return 语句从async 函数本身.您的代码在 getJSON 回调(被忽略)中有一个 return，而不是 async 函数本身.

  1. To set the resolution value of the promise created by the async function, you have to use a return statement from the async function itself. Your code has a return in the getJSON callback (which is ignored), not the async function itself.

要获取一个async函数的分辨率值，你必须await它(或者以旧的方式使用它的promise, 通过 then 等).

To get the resolution value of an async function, you must await it (or consume its promise in the older way, via then, etc.).

对于#1，您可以返回 awaiting getJSON 的结果:

For #1, you could return the result of awaiting getJSON:

async function getData() {
    try {
        return await $.getJSON('./data.json').promise();
    }
    catch (error) {
        console.log("error" + error);
    }
    finally {
        console.log('done');
    }
}

对于 #2，您需要 await 您的函数(这又需要在 async 函数中):

And for #2, you'd need to either await your function (this would, in turn, need to be inside an asyncfunction):

console.log(await getData());

...或者通过 then 使用它的承诺:

...or consume its promise via then:

getData().then(data => {
    console.log(data);
});

<小时>

旁注:您的 getData 隐藏错误，将它们转换为具有值 undefined 的分辨率，这通常不是一个好主意.相反，请确保它传播错误:

Side note: Your getData hides errors, turning them into resolutions with the value undefined, which is generally not a good idea. Instead, ensure that it propagates the error:

catch (error) {
    console.log("error" + error);
    throw error;
}

然后，自然地，确保任何使用 getData 的东西要么处理或传播错误，确保某处 确实 处理它(否则，你会得到一个未处理的拒绝"错误).

Then, naturally, ensure that anything using getData either handles or propagates the error, making sure something somewhere does handle it (otherwise, you get an "unhandled rejection" error).

你的评论

如何从函数外部的日志中访问 json 文件中的东西"?

how would I access the "stuff" in the json file from the log outside the function?

getData 的异步结果/解析值是 JSON 定义的对象(它不再是 JSON，它已被解析).所以你会在上面使用 .stuff ，例如:

The async result / resolution value of getData is the object the JSON defined (it's no longer JSON, it's been parsed). So you'd use .stuff on it, e.g.:

// In an `async` function
console.log((await getData()).stuff);

// Or using `then`:
getData().then(data => {
    console.log(data.stuff);
});

相关文章