[Week4] JS 實作串接 API(一)


前言

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

API 是什麼?

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

直接來寫作業ㄅ

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

說明 Method path 參數 範例
獲取所有書籍 GET /books &lt_limit:限制回傳資料數量 /books?&lt_limit=5
獲取單一書籍 GET /books/:id /books/10
新增書籍 POST /books name:書名
刪除書籍 DELETE /books/:id
更改書籍資訊 PATCH /books/:id name: 書名

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

180天成為工程師






Related Posts

Day00 - 系列文介紹

Day00 - 系列文介紹

DAY 07 : 圖形

DAY 07 : 圖形

Git 版本控制入門(3)- GitHub

Git 版本控制入門(3)- GitHub



Comments