前言

昨天介紹了 axios.post(新增)，
那今天就是要來介紹 axios.patch (修改)
(開始前請記得在 local 端開好前端、後段：
後端：json-server --watch db.json --port 10000
前端：npm start)
(PS. 但一開始先讓我暫時把 middleware 的設定移除，
不然會沒辦法發 PATCH 的 request XD)

本日正文

在開始之前再讓我們複習一下 axios.post 的語法要怎麼寫：

axios.post('http://localhost:10000/posts/', {
  id: 6,
  title: '我是第6篇文章',
  author: 'Misado'
})

.post 第一個參數帶 url，
第二個參數就是要新增的 data，
就可以新增一筆資料。

那如果今天我們要修改其中一筆資料該怎麼做呢？
這時候就要用到 axios.patch 啦！

axios.patch：修改資料

首先我們要知道該怎麼指定某一筆資料，
JSON Server 的官方文件有提到：

Now if you go to http://localhost:3000/posts/1, you'll get
{ "id": 1, "title": "json-server", "author": "typicode" }

於是我們就來瀏覽器試試看吧！(PS. 別忘了我們後端的 port 起在 10000)

好的，我們成功只拿到第6筆資料了，
那麼我們再來寫一下修改資料的 function 吧，
像這樣：

function updateData (){
    axios.patch('http://localhost:10000/posts/6', {
      title: '我是第6篇文章 0914修改',
    })
    .then(res => {
      console.log(res.data);
    });
    fetchData();
  }

讓我們來看看執行結果吧！

第6篇文章的 title 有順利改成新的資料，
那麼如果我故意 patch 資料中不存在的欄位會怎樣呢？

像這樣：

function updateData (){
    axios.patch('http://localhost:10000/posts/6', {
      test: '我是新加欄位測試',
    })
    ... (略)
  }

執行結果：

沒錯，test 也被新增進去了，
但這應該不是我們要的，
我們希望只有原本資料有的欄位才能修改，
那該怎麼做呢？

用 middlewares 來過濾

沒錯，我們可以用昨天有提到的 middlewares 來進行過濾。
那我們在 limit.js 加上 PATCH 的判斷條件，
像這樣：
(PS. 以下一樣只是簡單的示意寫法，粗糙之處敬請見諒)

module.exports = function(req, res, next) {
    if (req.method === 'GET') {
      next();
    }
    if (req.method === 'POST') {
      if (JSON.stringify(req.body).includes('title') && JSON.stringify(req.body).includes('author')) {
        next();
      }
    }
    if (req.method === 'PATCH') {
      if (JSON.stringify(req.body).includes('title') || JSON.stringify(req.body).includes('author')) {
        next();
      }
    }
  };

那我們把剛剛第6筆資料回復成原本的樣子再來試一次看看吧！
(PS. 改完 limit.js 記得重啟後端的 JSON Server，且要帶 middlewares 的參數)

json-server --watch db.json --port 10000 --middlewares limit.js

可以看到這次就有成功把這個 request 擋下來了，
那我們再來試著只是把 title 改成不一樣的文字試試看：

axios.patch('http://localhost:10000/posts/6', {
  title: '我是第6篇文章 0914修改 聽說0913是程式設計師節',
})

這次就有修改成功了，
表示我們的 middlewares 條件有設對。

那今天就是簡單介紹 axios.patch，
以及再複習一下 middlewares 的用法，
那我們明天再見囉~

參考文章

JSON Server
axios 基本使用 & Config
How to usepatchfunctioninaxios

後記

其實今天身體有點小微恙，
還好休息一下比較好了才能繼續趕鐵人賽文章orz
有種每天都在跟天窗 say hi 的感覺orz
又和平的度過了一天~~~~