Javascript初學筆記20 使用 axios 向第三方 API 請求資料2(Ajax)-簡易交友軟體實作

不知道為什麼，這樣的練習讓我覺得很爽快:D，今天接續昨天的Ajax練習，繼續記錄如何向第三方請求資料。
今天的紀錄請參考這支codepen

網址意義解析

我們在上一篇提到如何藉由Ajax(也就是axio，之後再找時間說明Ajax 暫時將它理解為一種存取第三方資料的技術)取得資料，首先你需要去閱讀相關的API文件，了解資料回傳的格式跟內容再進行存取。但其實網站能回應的資料自然不止一種，API文件中會有更進一步的說明，我們以以下這個連結做說明。
https://randomuser.me/
點擊文件後會有一長串的說明，提供不同情況下你所需要的伺服器位置
首先必須先了解網址背後的意義，以其中一個網址為例

https://randomuser.me/api/?results=5000
這個網址其實會細拆成幾個部分
首先是http的網路協議 暫時不重要
接著是randomuser.me，你請求API連線的主機位置
然後是api，也就是存取的路徑
最後是?results=5000，存取的變數內容，?表示變數的開頭 像這樣的連結就表示一次會回傳5000個資料!

適當的API存取路徑

現在已經知道根據不同的情況可以請求不同的資料，我們回到codepen上的例子
假設今天我是個直男，我在尋求交友對象時會希望出現的是真正的女生，而且我很懶惰，我希望一次可以出現多筆資料讓我看，有順眼的我再點進去就好，這種情況我該怎麼做?
首先我從上面已經知道一次要複數個結果可以藉由 ?results=${x} 去控制，那限定女性呢?
去查一下API文件後便發現可以利用gender=female處理，連接兩者後就會變成
https://randomuser.me/api/?results=3&gender=female 注意中間用&連接。

選取回傳的內容

這部分基本上跟上一份實作一模一樣，不同的點在於我今天每次請求都會回傳複數筆資料，且每一筆資料我都要從中抽取姓名、照片以及Email，為了方便處理我這次採用了template iterator的方式處理，如下

let info = `<div>                           <h5>${response.data.results[y].name.first} ${response.data.results[y].name.last</h5>                                                                              <img src = '${response.data.results[y].picture.large}'alt>                           <h5>${response.data.results[y].email}</h5>                      </div>`
要存放資料的位置.innerHTML += info

當然這些是包含在一個for迴圈內(y是變數)，但這邊僅是紀錄一下 template iterator 的用法
也就是說，每一次請求資料我會跑三次迴圈
每一次我都會建立一個包含姓名 圖片以及email的資料結構並存放到我想要的位置
由於是使用+=，所以名單會不斷的變長，配合監聽器就可以拼命點擊按鈕產出一大串的女性資料囉!挺有意思的吧?