iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
1
Modern Web

我每天都接一個API系列 第 8

[30apis] Day 7 : YouTube Data API + 基礎 Fetch API

YouTube API 實作

Youtube API ,好像很適合給新手練習,我記得 Codecademy 的 API 教學就是拿 YouTube 的 API 來用。不過,身為一個只會聽歌,不太會使用 YouTube 各種功能的人,實在想不到 YouTube API 要拿來幹嘛,
但就,做了再說吧。

Youtube 畢竟是個很大、使用者很多的網站。除了用戶上傳的資源跟各種關於用戶跟資源的 metadata,還有關於數據分析跟直播功能的部分,所以當然 Youtube API 是個相關 API的集合,包含:

  • YouTube Player APIs (根據不同裝置提供不同 API)
  • YouTube Data API
  • YouTube Analytics API
  • YouTube Live Streaming API

在第一次接觸這個 API , 又沒有特別有想法的時候,就選個基本的 Data API 來查詢搜索 YouTube 資料庫裡面的東西好了。

前面是一些取得 API Key 的教學,跟其他 Google 提供的 API 一樣,使用 YouTube API 也是要透過 Google API Console,在個別的 API 頁面 Enable API 然後取得 Key。
(詳情請見 Day 2 - Google Map Geolocation API

點進去 Navigation 上面的 Reference 頁:

裡面有詳盡的關於呼叫此 API 的教學,然後往下捲則是關於所有可以得到的資源列表。
YouTube 提供 API 使用者各式各樣的資源(Resource),比方說頻道、播放清單、搜尋結果、影片、留言、訂閱等,各種在 YouTube 上能看到的東西基本上都能取得。

今天就來抓一些關於 YouTube Data API 這個關鍵字的搜尋結果好了。

直接跳到 Search 的部分:

一個 Search 結果可以是跟特定關鍵字相關的

  • 影片 Video
  • 頻道 Channel
  • 播放清單 Playlist

他的 HTTP Request :

'GET', 'https://www.googleapis.com/youtube/v3/search'

在 URL 裡,除了 API Key 之外必須包含 part 參數。這個參數是為了避免大家呼叫 API 時得到太多不相關的資訊,所以用 part 來定義要取得的資料範圍。在 Search 的情況下,設定為 part=snippet 。(詳情請見 How to use the part parameter )

其他可選的參數有:

  • maxResults:預設為 5 。 可選 0~50。
  • order: 可依照 dateratingrelevancetitlevideoCountviewCount 排序
  • publishBeforepublishAfter
  • type :限制搜尋結果為 video、channel 或 playlist
  • q:搜尋關鍵字
  • 剩下自己去看

如此一來,我們的 API Request URL 就會像下面那樣:

// API Request URL

var url =
    "https://www.googleapis.com/youtube/v3/search" +
    "?id=7lCDEYXw3mM" +
    "&key=AIzaSyCta64_vT9ZB43rGLB4Hhtf2hErNFojh0M" +
    "&part=snippet" +
    "&q=YouTube+Data+API" +
    "&type=video" +
    "&videoCaption=closedCaption";

來試試看吧:

var url =
    "https://www.googleapis.com/youtube/v3/search" +
    "?id=7lCDEYXw3mM" +
    "&key=AIzaSyCta64_vT9ZB43rGLB4Hhtf2hErNFojh0M" +
    "&part=snippet" +
    "&q=YouTube+Data+API" +
    "&type=video" +
    "&videoCaption=closedCaption";


function makeRequest(){
  xhr = new XMLHttpRequest();
  xhr.open('GET',url);
  xhr.onload = function(){
    // do something
    var response = JSON.parse(this.responseText);
    for(var i = 0; i<response.items.length ; i++){
      var item = response.items[i];
      var title = item.snippet.title;
      var desc = item.snippet.description;
      var imgUrl = item.snippet.thumbnails.default.url;
       console.log(title,desc,imgUrl)
    }
   
  }
  xhr.send();
}


makeRequest();

得到的結果:

成功了呢。
那今天就先這樣(不對)。

基礎 Fetch API

其實簡單的 XHR 物件寫了這麼多天,早就膩了吧?那,換個方法來做 AJAX的話,該怎麼做?
今天就嘗試用用 Fetch API。

Fetch API 是很新的東西,而且是預計要來取代使用 XHR 做 AJAX 的最新技術,畢竟 XHR 最早被各大瀏覽器推出已經是 2005 年的事情,新一代的 XHR Level 2 也是 2011 年的事情了。
但由於 Fetch API 太新,還使用到 ES6 Promise 的特性,正如 ES6 還沒被各瀏覽器完全採用,Fetch API 在某些瀏覽器也不能用。

Fetch API 基本語法

fetch('Put API Request URL Here', {method: 'get'})
.then(function(response) {
    // do something to response
}).catch(function(err) {
    // do something if error happens
})

那我們來嘗試把上面的 YouTube API 改用 Fetch() 實作一次:

var url =
    "https://www.googleapis.com/youtube/v3/search" +
    "?id=7lCDEYXw3mM" +
    "&key=AIzaSyCta64_vT9ZB43rGLB4Hhtf2hErNFojh0M" +
    "&part=snippet" +
    "&q=YouTube+Data+API" +
    "&type=video" +
    "&videoCaption=closedCaption";

fetch( url, {method: 'get'})
.then(function(response) {
    // do something to response
  console.log(response);
  
}).catch(function(err) {
    // do something if error happens
  console.log('error')
})

結果如下:

咦,裡面怎麼好像沒有先前的資料呢?
這是因為,使用 Fetch 的 Request 會回傳 一個Promise 物件的 Response,必須經過一些處理才能取的我們想要的東西。
如果在 response 後面加一個 .json 的 method,再放一個.then() 來處理從 promise 裡拿出來的東西,像這樣:

fetch( url, {method: 'get'})
  .then(function(response) {
    response.json().then(
      function(data){
        console.log(data);
      }
    )
  }).catch(function(err) {
    console.log('error')
});

就可以看到傳回來的東西變成這樣:

把前面 XHR 物件 .onload() 裡面,把我想要的資料的 Loop 放進去 .then() 裡,就得到了跟剛剛一模一樣的結果了。

結束。(我懶得把東西弄進 HTML 裡了,就這樣吧)
Codepen 連結


上一篇
[30apis] Day 6 : Fixer API (匯率轉換)
下一篇
[30apis] Day 8 : Wordnik API (字典)
系列文
我每天都接一個API30

尚未有邦友留言

立即登入留言