[JS]請問這兩種物件的不同之處在哪裡?

javascript web fetch

amisser 2021-02-20 16:15:30 ‧ 1612 瀏覽

如上圖，我兩種都使用typeof查詢，兩個都是物件。
但是我第二個陣列我無法取得length，也無法使用比方說像array[0]這樣的方式console出來，請問問題出在哪?

附上程式碼

    var report_log = []

    fetch(link)
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        // console.log(myJson);
        for(k=0; k<myJson.length; k++){

            if(myJson[k].project_name == projectname){
                report_log.push(myJson[k])
            }
        }
    });

    console.log(report_log)

Leo iT邦新手 3 級 ‧ 2021-02-21 06:44:14 檢舉

這是因為非同步的關係。

這段程式碼你以為它是由上至下，但其實在執行到 `fetch(link)` 時，就會接著執行 `console.log(report_log)` ，等到 `fetch(link)` 取得結果後，才會再執行 `then` 裡面的程式碼，而印出來的結果看似好像一樣，但其實那是 console.log 小雷的地方，實際在執行時，你在 `console.log(report_log)` 的地方如果要取值一定會報錯，因為那時候它還是 `[]` 。

amisser iT邦新手 5 級 ‧ 2021-02-24 10:34:23 檢舉

原來，感謝幫忙

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

iT邦好手 1 級 ‧ 2021-02-21 13:04:20

最佳解答

就像 Leo 大說的那樣，因為 fetch 是非同步操作，所以需要稍微修改你的程式碼，確保邏輯正確:

    var report_log = []

    fetch(link)
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        // console.log(myJson);
        for(k=0; k<myJson.length; k++){

            if(myJson[k].project_name == projectname){
                report_log.push(myJson[k])
            }
        }
    });
    .finally(()=>{
        console.log(report_log)
    })

至於根本原因，是因為 fetch() 在 JS 的 Event loop 中從 Stack 被 Pop 出去以後會交由 WebAPI (瀏覽器)處理，等到處理完畢再將它放到 Queue 中。此時， console.log(report_log) 早就已經被處理完成了，因此，看不到任何東西是很正常的。