如何从另一个函数内部的异步获取中获取结果数据

Question

我正在尝试使用异步提取调用从服务器获取数据，但结果看起来像一个空的异步函数。我做错了什么？

这是我的代码

  function initAutoComplete (selector, params = []) {
    let config = {
      selector: selector, 
      data: {
        src: async () => {
          try {
            let myurl = `/component/get_states?country_id=64`; // http://localhost
            const response = await fetch(myurl)
            const source = await response.json();
            console.log('source', source); // ==> this doesn't even appear in the console log
            return source;
          } catch (err) {
            return err;
          }
        },
        keys: ["state_name"],
        cache: true,
      },
    };
    console.log('config', config.data);
    return config;
  }
  const asd = initAutoComplete('#state_name');
  console.log('asd', asd.data);

这是开发者工具中的结果

尽管当我使用 postman 测试 url 时，它显示的数据符合预期

[
    {
        "id": "17",
        "state_name": "Bali",
        "country_name": "Indonesia"
    },
    {
        "id": "16",
        "state_name": "Banten",
        "country_name": "Indonesia"
    },
    {
        "id": "7",
        "state_name": "Bengkulu",
        "country_name": "Indonesia"
    },
]

Answer 1

您的代码显示调用 initAutoComplete()，但所做的只是定义一个包含 data.src() 函数的 config 对象，但您显示的任何内容都没有调用该函数。

因此，根据这段代码，该函数永远不会执行，也不应该执行。该函数已定义，但未被调用。

你会用这个：

const asd = initAutoComplete('#state_name');
asd.data.src().then(result => {
    console.log(result);
}).catch(err => {
    console.log(err);
});

实际调用 async 函数。

此外，return err 可能是在您的 src() 函数中进行错误处理的错误方法。您想要 async 函数 returns 在您遇到错误时拒绝的承诺。正如您现在所做的那样，调用者很难分辨结果和错误条件之间的区别，因为您只是以两种方式返回一个值。调用者可能必须检查已解析的值以查看它是否是一个 instanceof Error 以辨别结果是否错误。

如果您在 src() 函数中删除 try/catch，那么拒绝将自动发生，这可能正是您想要的。

如何从另一个函数内部的异步获取中获取结果数据

how to get result data from async fetch inside another function

javascript

promise

fetch

es6-promise