JavaScript Day 26. API 串接：POST、GET、DELETE、PUT/PATCH

前面几篇我们提到过 DOM API 节点，但貌似没有讨论到什麽是 API；到了今天这个主题，好像确实是该好好的解释一下到底什麽是 API。

API 究竟是什麽？

在现今的时代，我们很习惯做什麽事情点一下就行，透过电脑、IPad、IPhone 便可以购物、贴文、标记甚至是订房、定机票、定外卖，与世界连结那都是一瞬间的事情，但有没有思考过为什麽我们有办法使用一根手指头就完成这些事呢？我们点了这颗按钮以後，在按钮的里面发生了什麽事？我们的资料究竟是怎麽被传送过去的？不同的装置和应用程序如何彼此相连？

其实让我们能够与世界连结的神物称做「应用程序介面」，英文为 Application Programming Interface，或也可以直接称他为 API。简单来说，API 是接收要求的信差，然後告诉系统我们要做什麽，再把系统的回应送回给我们；举例来说，我们去麦当劳点餐，招牌上有需多餐点，而麦当劳的厨房可以当作是系统，这时我们选好食物可问题来了，要怎麽让厨房知道我们点了什麽，并且煮好食物送到我们手上？不知道有没有唤起各位的记忆，通常站在柜台的服务员会帮我们做这些事，我们可以称他们为 API 先生/小姐，服务员 ( API ) 帮我们告诉厨房 ( 系统 ) 我们的需求，并且将厨房 ( 系统 ) 煮好的食物 ( 系统回应由 API 回传) 送回给我们，这就是 API 正在做的事，当然真的去麦当劳点餐的时候，即使他们看起来多麽像 API ，请还是要忍住称呼他们为 API 的冲动。

如果真的要从字面上去了解 API，说真的会很复杂也很混乱，因此在这边我也以容易理解的方式去说明，不过如果还是希望理解字面上的意思，也可以直接 google，它会给你史上最复杂的说明 (?)；另外我这里也还是可以提供一些开发者较专业但是简短易懂的说法：API 像是一个函式库，它会呼叫我们想要使用的函式，并给予相对应的参数，函式会回传我们需要的结果。

看完上面的说明，我们大至已经可以发现 API 与我们写的程序有多麽的密不可分了，基本上只要是需要与使用者互动，或系统与系统间需要互动的程序，几乎都会需要透过 API 这个服务员替我们来回传送，因此了解 API 确实是十分重要的。

HTTP method

接着我们来聊聊，在跟後端 API 做资料交换时，最常使用的传递资料方式「HTTP method」；开发网页的时候，我们时常需要跟後台 ( server ) 沟通，网页会发送 request 给 server，server 再回传 response，发送 request 给 server 时，最常见的方法是透过 http 或 https，而 http / https 传送的 request 有个重要的 method 栏位，可以说明 request 的目的为何。

上面说的 method 栏位又是什麽东西？HTTP 协定中定义了多种不同的 method，浏览器或是其他程序在进行 HTTP 连线时，会使用这些 method 来进行连线并取得回覆。

做了这麽多说明终於可以进入重点了XD

如同标题列举了五项 method：

• Get
• Post
• Delete
• Put
• Patch

但其中我只使用过四项，最常使用的则是 get 和 post。

其实不同的 method，就是对同一件事情做不同的操作而已，或者我们也可以再次使用白话的方式来分析这几种 method。我们来到一间 KTV，刚坐好要开始点歌，於是我们翻开点歌单看到很多很多的歌名 ( get )，我们对着萤幕输入歌曲号码 ( post )，突然发现这首歌不会唱所以取消 ( delete )，又重新点了一首自己熟悉的歌 ( Put )，开始唱的时候发现这首歌 Key 太高於是降 Key ( patch )，我总是觉得白话的说明很容易让我理解很多概念，颗颗。

不知道以上的说明是否有帮助到大家马上理解这些 method 的概念，不过我也还是另外在底下放一点范例及说明，同样也方便日後自己回锅阅读。

• Get / 取得我们想要的资料。

  // 取得产品列表
  function grtProductList(){
      axios.get(`url[, config]`).
      then(function (response){
          console.log(response.data);
      })
  }
  

• Post / 新增一项资料。( 如果存在会再新增一个新的 )

  实际上加入购物车以及送出订单资料都是可以使用 post 的，因为都是新增的资料。

  // 加入购物车
  function addCartItem(){
      axios.post(`url[, config]`,{
          data: {
              'productId':'b',
              'quantity': 8
          }
      }).
          then(function (response){
              console.log(response.data);
          })
  }
  

• Delete / 删除资料。

  删除资料比较特别的是，我们会有不同的需求，譬如想要全部清空或是指删除特定一项，我这里就把两种范例放上来。

  // 清除购物车内全部产品
  function deleteAllCartList(){
      axios.delete(`url[, config]`).
          then(function (response) {
              console.log(response.data);
          })
  }
  

  // 删除购物车内特定产品 
  function deleteCarItem(){
      axios.delete(`url[, config]`).
          then(function (response) {
              console.log(response.data);
          })
  }
  

• Put / 新增一项资料，如果存在就覆盖过去。( 最後还是只会有一笔资料 )

  // 修改订单状态
  function editOrderList(orderId) {
    axios.put(`url[, config]`,
      {
        "data": {
          "id": orderId,
          "paid": true
        }
      },
      {
        headers: {
          'Authorization': token
        }
      })
      .then(function (response) {
        console.log(response.data);
      })
  }
  

• Patch / 附加一笔新的资料在已经存在的资料後面。( 资料必须已经存在，patch 会扩充这项资料 )

  最後 patch 我因为没有使用过因此没有范例，大概理解一下他的用法我想应该就可以了，之後若我还有针对这个去练习再补上来与大家分享罗。

最後，在找资料的同时有发现比较重要的几个点必须注意，get 在资料传递上会直接将资料写在网址上，会这样主要是方便使用者和开发者，可以直接改网址变数去取得结果或除错，而这样的方式也最常被用来「取得资料」，可是相对的它会有可怕的资安风险，因此这点一定要注意；post 在资料传递上就比较安全了，因为它会把资料隐藏起来，不过是对於使用者隐藏，假如使用侦错工具或是检查网路还是可以看到资料，因此我们在使用资料传递的时候，更需要谨慎的去思考如何保障使用者的隐私安全。

参考资料：

API 到底是什麽？ 用白话文带你认识
Change reuqest method 甚麽是 HTTP Method？
常见的HTTP Method的不同性质分析：Get,Post和其他4种Method的差别