〖網頁挑戰〗 What's the country
What's the country
又是 Frontend Mentor 的挑戰！
這次要寫一個網站，讓使用者可以查詢國家，並且顯示國旗、人口、首都、語言、幣別等資料。原始檔案提供了 JSON 檔，或是可以去串接 REST Countries API，動態取得並呈現各國的資料，基本上看我們要怎麼寫都可以。
在 Frontend Mentor 挑戰中有分五個等級： Newby、Junior、Intermediate、Advanced、Guru，這次的挑戰是..Advanced， 先醜哭乙次（？），我也太勇敢了吧！雖然我只能挑戰到這個等級，因為 Guru 就要花錢了（喂—）
這次挑戰內容：
- 在首頁渲染所有國家的小卡片
- 用名稱搜尋國家
- 用州別篩選出國家
- 點擊小卡片就能看見國家的詳細資料
- 在詳細資料中點擊相鄰國家，即可跳到該國家的詳細資料
- 切換黑夜模式
HTML + CSS 切版
這次的重點是串接 API，所以切版的部分我就不再贅述。
<header>
<a>Where in the world?</a>
<button>Dark Mode</button>
</header>
上方是一個 header：
裡面放首頁連結<a>跟切換模式的<button>
<main>
<div>
<!-- search bar -->
<!-- filter box -->
</div>
<div>
<!-- countries card container -->
</div>
</main>
中間的 main：
放入搜尋和篩選工具
再來放入國家的小卡片們
最底下就是 footer，寫版權文字的地方。
串接 REST Countries API
首先進入 rest countries API 網站，閱讀一下文檔，才知道要怎麼串：
確認串接端點
文檔中都會寫可以從哪個端點取得什麼資料，對第一次串 API 的孩紙來說一定會毫無頭緒，不知道從何下手，，我的話會把端點路徑直接丟到網址列去看資料的結構，然後會得到讓人視力下降的頁面（？）
以上就是把空格縮排都刪除的 JSON 文字
因為現在的資料以 JSON 的數據格式為主，這裡推薦用 Chrome 擴充功能 JSON Viewer Pro 可以直接把密密麻麻的 JSON 文字轉換成好閱讀的畫面：
綠色顧眼睛
這時候我們可以比對最初的設計畫面，一邊比對資料結構，才不會抓了資料下來，才發現跟自己要的不一樣（哭）
現在來回頭看一下挑戰內容，看哪些端點適合用來完成挑戰：
- 在首頁渲染所有國家的小卡片
這邊就用所有資料的端點：https://restcountries.com/v3.1/all
- 用名稱搜尋國家
用名稱取得資料：https://restcountries.com/v3.1/name/{name}
後方的 {name} 可以替換國家名稱，想找韓國就是 https://restcountries.com/v3.1/name/korea，
只要名稱裡面有包含搜尋的文字，都會跳出資料，所以除了南韓也會找到北韓 :)
- 用州別篩選出國家
用洲名取得資料：https://restcountries.com/v3.1/region/{region}
- 在詳細資料中點擊相鄰國家，即可跳到該國家的詳細資料
從資料結構中可以知道，相鄰國家給的資料是國家代碼，所以我們要有一個端點是以國家代碼取得資料：https://restcountries.com/v3.1/alpha/{code}
接下來寫 JavaScript 吧。
JavaScript - 非同步請求
JS 是單線程程式語言，也就是一次執行一行程式碼，執行完成才會進入下一行，假設今天我開啟網頁時，這個網頁需要去向遠端伺服器請求資料，這時候單線程的 JS 就會等待資料回傳回來（執行完成），才執行下一行，使用者就必須在螢幕前等..一直等..繼續等..
想像起來有多浪費生命！
於是非同步請求就這樣產生啦，當 JS 遇到非同步程式碼，非同步程式碼會被放到執行環境中，並從 Stack 中脫離。當非同步程式碼執行完成時，會把要執行的 callback 放到 Callback Queue 中。最後等到 Stack 已經沒有需要執行的程式碼時，再去執行 Callback Queue 中的函式。
或是可以想像一下：
你是一個咖啡店店員，要做的事是點餐、收銀、沖咖啡，出杯，如果今天你必須完成這個循環才能為下一位客人點餐，整個產線就會堵塞，這就是同步程式碼，一切都靠你自己完成，一次只能做一件事。
但是今天你點完餐後，先去咖啡機按下沖煮咖啡，接下來沖咖啡的事就是機器的事，而你又可以繼續為下一個客人點餐，不僅會減少排隊時間，還可以同時煮很多人的咖啡，這就是非同步程式碼，你把需要花時間處理的事交給了咖啡機。
所以很多時候，我們都會依賴其他伺服器提供的資料，就必須使用非同步方法來請求資料。
fetch 獲取數據
fetch 是非同步方法，用在與其他 API 對接獲取數據時使用，返回一個 Promise。
使用 fetch 時，因為要等待回應，所以還沒有獲取任何數據，
為此建立一個容器 - Promise，用來放置未來回傳的結果。
現在常用 async-await 語法糖來包裝非同步程式碼，看起來比較好閱讀：
// 定義端點的 URL
const BASE_URL = 'https://restcountries.com/v3.1'
// 將非同步函式包裝在裡面 開頭寫下關鍵字 async
const getAllCountries = async function () {
// ...
}
裡面包一層 try-catch 錯誤處理，抓取錯誤：
const BASE_URL = "https://restcountries.com/v3.1";
const getAllCountries = async function () {
//裡面包一層 try-catch
try {
// 正常執行程式碼
} catch (err) {
// 有錯誤時 在 console 列出錯誤
console.error(err);
}
};
接著就把 fetch 方法寫進去：
const BASE_URL = "https://restcountries.com/v3.1";
const getAllCountries = async function () {
try {
const res = await fetch(`${BASE_URL}/all`);
// 用 await 關鍵字 等待資料回傳完成
if (!res.ok) throw new Error(`SOMETHING WENT WRONG! (${res.status})`);
// 如果沒有回傳成功 則丟出錯誤 讓 catch 可以接住並報錯
const data = await res.json();
// 用 await 關鍵字 解析回傳的資料
if (!data) throw new Error("DATA IS NOT FOUND!");
// 如果沒有資料 則丟出錯誤 讓 catch 可以接住並報錯
displayCountries(data);
// 將資料寫成 DOM 並且渲染
} catch (err) {
console.error(err);
}
};
其他端點的寫法也差不多，只是要綁在不同的事件監聽器上。
黑夜模式還沒有寫好，只要跳轉其他畫面，就會恢復原狀，所以這部分會進一步優化，只是要等我睡飽（躺平）
完成頁面 ▶ What's the country
Solution ▶ Frontend Mentor - What's the country
你可能也想看
