前言

緩慢看完 [NET101] 網路基礎概論（搭配 JS 實作練習） 後覺得不太扎實，果然一寫到作業就掛掉了。這幾篇會用 第四週作業 來整理 JavaScript 實際串接 API 時會用到的語法和觀念。

API 是什麼？

API 全名為 Application Programming Interface，中文翻譯為「應用程式介面」。簡單來說就是交換資料的管道。想知道更多可以看 從拉麵店的販賣機理解什麼是 API

直接來寫作業ㄅ

API 文件
Base URL: https://lidemy-book-store.herokuapp.com

hw1：來自秋秋鞋的任務

有一天，住你隔壁的鄰居秋秋鞋跑來按門鈴，說有事想要找你討論，他最近在做一個知識型的 YouTube 頻道，可是快要沒有靈感了。
這時，他想到一個好主意！他只要能夠看到書店提供的書籍相關資訊，就可以從中汲取靈感，之後就可以發想相關題材，頻道就不會一直不更新了。
身為秋秋鞋的好朋友，這個重責大任當然就交給你了！
請閱讀開頭給的 API 文件並串接，用 node.js 寫出一個程式，執行後會在 console 列出前十本書籍的 id 以及書名。
順帶一提，叫做秋秋鞋是因為他很喜歡秋天。

把東西抓下來：requst

資料來源：
官網
MDN

首先，我們要下載 request 的 npm：

npm install requst --save

request 的基本用法為：

request(input, init)

通常 input 為目標網址，例如官網上提供的範本為：

const request = require('request');
request('http://www.google.com', function (error, response, body) {
   console.error('error:', error);
   console.log('statusCode:', response && response.statusCode);
   console.log('head:', response.headers);
   console.log('body:', body);
});

初步整理資料：JSON

剛抓下來的資料會以 JSON 呈現。 JSON 全名 JavaScript Object Notation ，和 JS 中物件很像，只是不管是 key 還是 value 都要用雙引號 " 框起來，而整體是個字串。
JSON 轉物件
參考資料： MDN
JSON.parse() 可以將 JSON 轉成物件，第一個參數放欲轉換的 JSON ，後面可以指示如何選擇結果。例如

const json = {
  "name" : "jason",
  "age" : "23",
  "phone" : "0922"
}

// 排除 age
const obj = JSON.parse(json, (key, value) => {
  if (key === 'age') return undefined
  return value
})

//{name: "jason", phone: "0922"}

物件轉 JSON
參考資料： MDN
與此相對的， JSON.stringify() 可將物件轉換成 JSON 格式。第一個參數一樣放物件，後面則是結果的轉換標準。

const obj = {
  name: "jason",
  age: "23",
  phone: "0922"
}

// 排除 age
const json = JSON.stringify(obj, (key, value) => {
  if (key === 'age') return undefined
  return value
})

//{"name": "jason", "phone": "0922"} <= 這是字串

try...catch

參考資料： MDN
try...catch 可用於程式中可能出錯處，主動捕捉錯誤，並防止整個程式因錯誤而停擺。用法如下：

try {
   // 預期可能會發生錯誤的程式碼
} catch (e) {
   // try 區塊有拋出錯誤時，則執行這裡的程式碼
} finally {
   // finally 區塊的程式碼一定會在最後被執行
   // 可以省略 finally 區塊
}

回頭看第一題

因為實在太菜了，直接看答案怎麼寫好了：

const request = require('request');
const API_ENDPOINT = 'https://lidemy-book-store.herokuapp.com';

request(`${API_ENDPOINT}/books?_limit=10`, (err, res, body) => {
  if (err) {
    return console.log('抓取失敗', err);
  }
  let data
  try {
    data = JSON.parse(body);
  } catch(err) {
    console.log(err);
    return
  }
  for (let i = 0; i < data.length; i += 1) {
    console.log(`${data[i].id} ${data[i].name}`);
  }
})

筆記：

1. 目標網址抓出來變成變數，之後要改目標位置就只要改該變數就好。方便。
2. 先查看是否抓取成功 => 轉成物件後再檢查一次 => 依次列出前十個

7/24 實際跑過筆記

1. url 後方加上 ? 可以加參數，如上方 _limit=10 就是限制只抓取十筆。但似乎是照 id 抓而非出現順序？
2. try 的框框中用 const 定義的新變數無法在最後使用，所以外面才會先定義一個 data。

資料來源：
API 基礎
[第六週] API 基礎-
實際串接 API、資料格式: JSON、API Method 風格: RESTful