use-javascript-to-connect-api-with-unsplash

【JavaScript瀏覽器】:實作串接 API(1) ⏤ Unsplash API

因為對用 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 的選項,如下圖:

API串接

點進去頁面後可以先選擇「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 串接,成果如下!

串接 API

如果覺得我的文章有幫助的話,歡迎幫我的粉專按讚哦~謝謝你!

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top