因為對用 JavaScript 串接 API 滿不熟悉的，再加上最近看了些職缺用 JavaScript 串接 API 又是必備技能，所以決定來花點時間好好搞懂這塊，順便練習實作，比較容易發現問題出在哪裡。
如果你對 API 還沒有任何概念，歡迎參考我的另一篇文章：API 是什麼 ? 最適合前端初學者的 API 概念解釋！
內容目錄
1. 什麼是 API
API 的全名是 Application Programming Interface ，中文為「應用程式介面」。 API 的應用及範圍非常廣泛，在這篇文章中我所談到的 API 指的是應用在網頁的 API 。
那麼在寫網頁的過程中什麼時候會用到 API 呢？當你需要從後端(伺服器)取得資料時，就需要串接後端所提供的 API ，或是當你需要第三方網頁、 APP 等等提供一些資料或服務時(ex: Google Map)，就必須去看第三方網頁的 API 文件來用 JavaScript 串接 API 。
2. 串接 API 的步驟
2.1 瀏覽 API 文件
串接API的第一個步驟要先到該網站瀏覽 API 文件，通常該文件會描述 API 提供了哪些資料，以及 API 的使用方法、注意事項等等。
2.2 思考要用這些資料做什麼事情
瀏覽過 API 文件後就可以開始思考要使用這些資料做什麼事情。
2.3 用 JavaScript 串接 API ，取得動態資料
再來就是用 AJAX 的方式，利用瀏覽器 send http request 來串接後端或是第三方網頁的 API ，取得 JSON 格式的資料。
2.4 開始切版
取得 JSON 格式的資料後，就可以看到每個資料對應到的 Key ，最後直接用 JavaScript 把資料寫進 HTML ，之後網頁的內容就會根據後端的資料來做變更，而不用自己去改前端的 code 。
3. 實作 Unsplash API
Unspalsh 是一個免費的相片共享網站，該網站完全免費，只要在分享相片的平台上標注 Unsplash 和攝影師名字即可，本部落格的部分文章首圖就是取自 Unsplash 的相片哦！剛好發現 Unsplash 有提供 API 的服務，所以就決定拿他當第一個練習啦。
3.1 瀏覽 Unsplash 的 API 文件
Unsplash 的首頁中就可以找到 API/Developers 的選項，如下圖：
點進去頁面後可以先選擇「Register as a developer」，註冊為開發人員，也可以點選上方的「document」先瀏覽 API 文件。
通常 API 文件上會描述該 API 提供了哪些資料以及使用方法， Unsplash 提供的 API 可以讓你：
- 用關鍵字搜尋照片
- 顯示隨機照片
- 顯示最新上傳到 Unspalsh 的照片
3.2 思考要用這些資料做什麼事情
知道提供哪些資料後就可以開始思考要用這些資料做什麼事情了。
因為這篇文章單純紀錄串接 API 的練習，所以我就單純顯示出 API 抓到的圖片，不特別做切版了。
3.3 開始用 JavaScript 串接 API
3.3.1 登錄 Application => 取得 Access key、Secret key
根據 Unsplash 的文件，要串接 API 之前，要先註冊為開發人員後，再登錄 Application 才能取得 Access key 和 Secret key ：
3.3.2 將 Access key 放到 request 的 url 中
根據文件，只要直接將將 Access key 放到 request 的 url 中，就可以收到 JSON 格式的 require：
第一種寫法（參考You might not need jQuery）：
let xhr = new XMLHttpRequest();
let url = 'https://api.unsplash.com/photos/?client_id=XeMLEo-cG4umamAaRPxahF5CC7nhdSYGtbKlmU1O7Sk'
xhr.open('GET', url, true);
xhr.onload = function() {
if(this.status >= 200 && this.status < 400) {
let response = JSON.parse(this.response)
console.log(response)
};
xhr.onerror = function() {
};
xhr.send();第二種寫法（參考[FE210] 從新手到中手：前端工程加強班作業4）：
let url= "https://api.unsplash.com/photos/?client_id=XeMLEo-cG4umamAaRPxahF5CC7nhdSYGtbKlmU1O7Sk";
let xhr = new XMLHttpRequest();
xhr.open('GET',url,true);
xhr.send();
xhr.onreadystatechange = function(){
if(this.readyState === 4 && this.status === 200){
let response = JSON.parse(this.response);
console.log(response);
}
};第三種寫法（參考我每天都接一個API系列 第 6 篇）：
let url = "https://api.unsplash.com/photos/?client_id=XeMLEo-cG4umamAaRPxahF5CC7nhdSYGtbKlmU1O7Sk";
function makeRequest() {
xhr = new XMLHttpRequest();
xhr.onload = function() {
let response = JSON.parse(this.response);
console.log(response)
}
;
xhr.open("GET", url, true);
xhr.send();
}
makeRequest();將 response 的 JSON 文件用 JSON.parse 轉為陣列後的資料如下：
如此一來就可以看到所有的資料了！
以上三種都是用 xhr 來 send http request ，ES6 之後，瀏覽器提供了 fetch API 來 send http request ，相較於 xhr 來說，程式碼可以寫得更簡潔一點！
第四種寫法：使用 fetch API：
fetch("https://api.unsplash.com/photos/?client_id=XeMLEo-cG4umamAaRPxahF5CC7nhdSYGtbKlmU1O7Sk")
.then((res) => {
const data = res.json();
return data;
})
.then((data) => {
console.log(data);
});一樣可以獲得上面 console 出來的 array。
3.4 開始切版
現在知道有什麼資料可以拿之後，可以先用 HTML 切版：
不過這邊重點是練習串 API ，所以就先暫時不切版了，直接給 HTML 一個 class = container 的 div 就好，再限制一下 img 的寬度為 250 px ，最後再用 JavaScript 把圖片放到這個 div 裡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
img {
width: 250px;
}
</style>
<body>
<div class="container"></div>
</body>
<script>
fetch("https://api.unsplash.com/photos/?client_id=XeMLEo-cG4umamAaRPxahF5CC7nhdSYGtbKlmU1O7Sk")
.then((res) => {
const data = res.json();
return data;
})
.then((data) => {
console.log(data);
for (let i = 0; i < data.length; i++) {
let container = document.querySelector(".container");
let img = document.createElement("img");
img.setAttribute("src", data[i].urls.small);
container.append(img);
}
});
</script>
</html>
這樣就完成了簡單的 API 串接，成果如下！
如果覺得我的文章有幫助的話，歡迎幫我的粉專按讚哦~謝謝你！