如何從另一個 function 中的異步獲取中獲取結果數據

Question

我正在嘗試使用異步獲取調用從服務器獲取數據，但結果看起來像一個空的異步 function。我做錯了什么？

這是我的代碼

  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() function 的config object，但您顯示的任何內容都不會調用該 function。

因此，根據此代碼，function 永遠不會執行，也不應該執行。 function 已定義，但未調用。

你會用這個：

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

實際調用async function。

---

此外， return err可能是在您的src() function 中進行錯誤處理的錯誤方法。您想要async function 返回的 promise 以在您收到錯誤時拒絕。 正如您現在所做的那樣，調用者很難分辨結果和錯誤條件之間的區別，因為您只是以兩種方式返回一個值。 調用者可能必須檢查已解析的值以查看它是否是一個 instanceof Error 以辨別結果是否為錯誤。

如果您刪除src() function 中的try/catch ，那么拒絕將自動發生，這很可能是您想要的。