跳到內容

JavaScript/非同步/練習

來自華夏公益教科書,一個開放世界的開放書籍

主題:非同步函式




1.定義一個函式

  • 透過上一頁的jsonplaceholderapi讀取使用者
  • 顯示所有十個使用者名稱以及他們的家鄉
  • 引入日誌訊息以觀察程式流程
單擊檢視解決方案
"use strict";

console.log("Start of script");

async function getUserAndTown() {
  console.log("Start of function");
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const users = await response.json();
    for (const user of users) {
      console.log(user.name + " / " + user.address.city);  // or: alert(..)
    }        
  } catch (err) {
    console.log('Some error occurred: ' + err.message);
  }
  console.log("End of function");
}

console.log("Calling function");
getUserAndTown();

console.log("End of script");

預期輸出

Start of script
Calling function
Start of function
End of script
Leanne Graham / Gwenborough
Ervin Howell / Wisokyburgh
Clementine Bauch / McKenziehaven
Patricia Lebsack / South Elvis
Chelsey Dietrich / Roscoeview
Mrs. Dennis Schulist / South Christy
Kurtis Weissnat / Howemouth
Nicholas Runolfsdottir V / Aliyaview
Glenna Reichert / Bartholomebury
Clementina DuBuque / Lebsackbury
End of function
華夏公益教科書