如何正確使用 Promise 在 function 末尾返回數組？

Question

我調用 function 的目的是在執行 API 調用后返回結果。 但它在開始時返回了一個結果。 我做錯了什么，我該如何解決？

（function 的 rest 運行良好，並在控制台中給了我結果，但我無法讓它傳回。

我知道這與我使用 Promise 的方式有關，但我花了幾個小時閱讀它們，但還沒有得到我的理解。 所以我轉向你們。）

function：

export function previewStannpSingleCard(card) {
  var requestOptions = {...}
  getSecret("stannp_API")
    .then((secret) => {

        fetch("https://dash.stannp.com/api/v1/postcards/create?api_key=" + secret + "&", requestOptions)
            .then(response => response.json())
                .then(function (result) {
                console.log("json: " + result)
                console.log("pdf: " + result.data.pdf)
                return (result) 
            })

            .catch(error => console.log('error', error));
    })
}

這就是我調用 function 的方式：

export async function preview_click(event) {

let results = await wixData.get("UserCard", "ec9b2675-8b24-446b-a0f9-fc0246a3f35f")
        let preview = await previewStannpSingleCard(results)
        console.log("pdf to use next: " + preview.data.pdf);
        }

Answer 1

您忘記從previewStannpSingleCard function 返回鏈式 promise 的結果。

您可以通過使用try/catch和await將 function previewStannpSingleCard重構為async function 以使其看起來更加同步

async function 還將返回包裝在 promise 中的結果，因此您可以await previewStannpSingleCard調用：

export async function previewStannpSingleCard(card) {
  const requestOptions = {};
  try {
    const secret = await getSecret("stannp_API");
    const response = await fetch("https://dash.stannp.com/api/v1/postcards/create?api_key=" + secret + "&", requestOptions);
    const result = await response.json();
    console.log("json: " + result)
    console.log("pdf: " + result.data.pdf)
    return result;
  } catch (error) {
    console.error('error', error);
    throw error;
  }
}

Answer 2

您需要將 previewStannpSingleCard 定義為異步（ export async function previewStannSingleCard ）並將await放在getSecret(...).then(...).fetch(...)之前，以便它可以等到返回。 尋求更簡單的解決方案； 您可以通過回調來設置預覽；

export function previewStannpSingleCard(card, callback) {
  var requestOptions = {...}
  getSecret("stannp_API")
   .then((secret) => {
    fetch("https://dash.stannp.com/api/v1/postcards/create?api_key=" + secret + "&", requestOptions)
        .then(response => response.json())
            .then(function (result) {
            console.log("json: " + result)
            console.log("pdf: " + result.data.pdf)
            //return (result) remove this
            callback(result)
        })

        .catch(error => console.log('error', error));
    })
}

然后將其稱為；

 export async function preview_click(event) {

    let results = await wixData.get("UserCard", "ec9b2675-8b24-446b-a0f9-fc0246a3f35f")
    previewStannpSingleCard(results, function(result){
         preview = result;
    })
    console.log("pdf to use next: " + preview.data.pdf);
 }

Answer 3

看到代碼，您不會從previewStannpSingleCard function 中返回任何內容。 return (result)會將值返回給fetch調用中then塊的回調 function。 您需要將返回值傳播給父級，然后返回 promise 即getSecret ：像這樣：

export function previewStannpSingleCard(card) {
  var requestOptions = {...}
  return getSecret("stannp_API")
    .then((secret) => {
        return fetch("https://dash.stannp.com/api/v1/postcards/create?api_key=" + secret + "&", requestOptions)
            .then(response => response.json())
                .then(function (result) {
                console.log("json: " + result)
                console.log("pdf: " + result.data.pdf)
                return (result) 
            })
            .catch(error => console.log('error', error));
    })
}