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: 可依照 date、rating、relevance、title 、videoCount、viewCount 排序
• publishBefore 跟 publishAfter
• 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 連結