前面幾篇我們提到過 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的差別