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


Posted by 生菜 on 2020-07-25

資料參考:
API 基礎

hw2:最後的考驗

原本以為上次就已經是最後一次幫忙,沒想到秋秋鞋還是又跑來找你了。他說他想要更多功能,他想把這整個書籍資料庫當作自己的來用,必須能夠顯示前 20 本書的資料、刪除、新增以及修改書本,這樣他就可以管理自己的書籍了。
(跟 hw1 不同,之前是 10 本,這次要顯示 20 本)
雖然你很想問他說為什麼不用 Excel 就好,但你問不出口,再加上你最近剛學程式需要練習的機會,於是你就答應了。
請閱讀開頭給的 API 文件並串接,用 node.js 寫出一個程式並接受參數,輸出相對應的結果,範例如下:

node hw2.js list // 印出前二十本書的 id 與書名
node hw2.js read 1 // 輸出 id 為 1 的書籍
node hw2.js delete 1 // 刪除 id 為 1 的書籍
node hw2.js create "I love coding" // 新增一本名為 I love coding 的書
node hw2.js update 1 "new name" // 更新 id 為 1 的書名為 new name

process.argv

參考資料
使用 process 可以取得指令的參數。 process.argv 可以得到啟動 Node.js 時 command line 的參數。
例如若 hw1.js 中有 console.log(process.argv) ,再於 command line 輸入 node hw1.js 123 ,會得到一個陣列,分別指向 node 、 hw1 和 123 。

開始寫之前,整體架構是

找到第二三個參數

const request = require('request');

const apiUrl = 'https://lidemy-book-store.herokuapp.com';
const action = process.argv[2]
const param = process.argv[3]

用 switch 區分功能

switch (action) {
  case 'list':
    listBooks();
    break;
  case 'read':
    readBooks(param);
    break;
  case 'delete':
    deleteBooks(param);
    break;
  case 'create':
    createBooks(param);
    break;
  case 'update':
    updateBooks(param, process.argv[4]);
    break;
  default:
    console.log('Available commands: list, read, delete, create and update');
}

list 功能
這個上一題練習過了:

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

read 功能
從上面的函式修改:

function readBooks(id) {
  request(`${apiUrl}/books/${id}`, (err, res, body) => {
    if (err) return console.log('抓取失敗', err);
    const data = JSON.parse(body);
    return console.log(data)
  });
}

delete, post 和 patch

參考資料
request.delete() 可以刪除資料,例如:

request.delete(
  'https://reqres.in/api/users/2',
  function (error, response, body) {
    console.log(response.statusCode)
  });

上方因為資料已經被刪掉了,因此會印出 204 。
這題中,刪除的語法是這樣:

function deleteBooks(id) {
  request.delete(`${apiUrl}/books/${id}`, (err) => {
    if (err) return console.log('刪除失敗');
    return console.log('刪除成功');
  });
}

刪除完後, err 照理來說會變成 null (false) 。

request.post() 可以增加資料,最常見的形式為:

request.post(
  {url, 
  form: {key:'value'}
  }, 
  function(err,httpResponse,body){ /* ... */ })

這題中,新增的語法如下:

function createBooks(name) {
  request.post({url: `${apiUrl}/books`, form: {name,}}, (err) => {
    if (err) return console.log('新增失敗', err);
    return console.log('新增成功')
  });
}

request.patch() 則可以修改資料,使用形式為:

request.patch({
    url,
    form: {
      //欲修改內容
    },
  }, function)

這題中寫法如下:

function updateBooks(id, newName) {
  request.patch({url: `${apiUrl}/books/${id}`, form: {newName}}, (err) => {
    if (err) return console.log('更新失敗', err);
    return console.log('更新成功');
  });
}









Related Posts

js筆記---DOM

js筆記---DOM

[ 筆記 ] HTML - tag 基礎標籤

[ 筆記 ] HTML - tag 基礎標籤

用 PHP 與 MySQL 學習後端基礎(三)實作 API

用 PHP 與 MySQL 學習後端基礎(三)實作 API


Comments