在 JavaScript 開關/案例中做出承諾

Question

我有一個問題（老實說是兩個問題）在 switch-case 中得到一個承諾或回調。 這是基本代碼。

switch (page) {

  case 'contact':

   alert('contact in switch');

   var promise = $.get(page +'.json');
   promise.then(function(data){
     console.log("Items back! ", data);                     
   });

  break;
  .......

  console.log("Response data: ", data); // This is undefined

我知道由於異步函數的性質，在數據返回之前，開關正在break ，使data記錄為undefined 。 所以我認為將break放在回調中會起作用，但事實並非如此。 當我這樣做時，應用程序完全停止工作。

所以我想我的第一個問題是如何讓switch-case “等待”直到數據返回，然后才會break 。

我遇到的第二個問題是，我最終希望能夠通過將它包裝在一個函數中來重用我的switch ，其中page參數是用戶導航到的頁面的標題，並且回調將傳回從getPageData返回的數據功能。 當我嘗試這樣做時，它會導致pageContentLoader函數的回調出現undefined錯誤。

為了記錄，下面代碼中的getPageData是一個單獨的函數，它執行一個通用的 XMLHttpRequest。 它工作正常，因為數據在回調中被正確記錄。

pageContentLoader(page, function(data) {
                    console.log("Back with data ", data);   
});

function pageContentLoader(page, callback){
    var data;

            switch (page) {
                case 'contact':
                    console.log('contact in switch');
                    getPageData(page,function(data){
                      console.log("Contacts back! ", data);     
                    });             
                    break;    
                case 'blog':
                    console.log('blog in switch');
                    getPageData(page,function(data){
                        console.log("Posts back! ", data);      
                    });                 
                    break;    
                default:
                    alert('hey that page doesn't exist!');    
            } 
            callback(data); // results in callback undefined!!
}   

我相信有可能完成這項工作，但到目前為止，我已經嘗試了所有我能找到的方法，但沒有任何運氣。 如果有人有任何指示或想告訴我我在代碼中做錯了什么，我將不勝感激！

Answer 1

剛剛遇到這個問題，解決方法如下：

async getResolvedPromises(myObject) {
    const promises = await Object.keys(myObject).map(async (k) => {
        switch (k) {
            case '1':
                const firstPromise = await asyncCallNumber1()
                return firstPromise
            case '2':
                const secondPromise = await asyncCallNumber2()
                return secondPromise
            case '3':
                const thirdPromise = await asyncCallNumber3()
                return thirdPromise
            default:
                return
        }
    })

    const data = await Promise.all(promises)
    return data
}

Answer 2

這是我最近改編的 Typescript 中的一個示例：

private pageContentLoader = async (): Promise<any> => {
    try {
        switch(page) {
            case 'contact':
                return await getPageData(page).then((data) => {
                    console.log("Contacts back! ", data);
                    return data;
                })
            case 'blog':
                return await getPageData(page).then((data) => {
                    console.log("Posts back! ", data);
                    return data;
                })
            default:
                return 'Page does not exist';
        }   
    } catch (err) {
        throw err;
    }
}


private getPageContent = async () => {
    try {
        const contactPageData = await pageContentLoader('contact');
        const blogPageData = await pageContentLoader('blog');
    } catch (err) {
        throw err;
    }
};

Answer 3

這是使用 Promise 構造函數的解決方案：

 pageContentLoader('blog').then(function(data) { console.log("Call to pageContentLoader results: ", data); }); function pageContentLoader(page) { switch (page) { case 'contact': return new Promise(function(resolve) { console.log('contact in switch'); getPageData(page).then(function(data) { console.log("pageContentLoader results: ",data); resolve(data) }); }); break; case 'blog': return new Promise(function(resolve) { console.log('blog in switch'); getPageData(page).then(function(data) { console.log("pageContentLoader results: ",data); resolve(data) }); }); break; default: return new Promise(function(resolve) { console.log('default in switch'); console.log("pageContentLoader results: doesn't exist"); resolve("page doesn't exist"); }); } } function getPageData(page) { return new Promise(function(resolve) { window.setTimeout(function() { console.log('getPageData executed') resolve(page); },2000); }); }

enter code here

Answer 4

對於第一個問題：您正在嘗試加載可能尚未定義的值。 如前所述，您需要考慮學習一些異步編碼的技巧和竅門，但這里有一個解決方案：

  switch (page) {
    case 'contact':
      alert('contact in switch');
      $.get(page +'.json').then(function(data){
        /* all the code AFTER fulfilling 
           the promise should BE here
         */
        handle_data(data);
      });
    break;

  //console.log("Response data: ", data); this should not be here
  ...