iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
0
Modern Web

一個 JS 學習者的日常系列 第 6

一個 JS 學習者的日常 day5

當我們做一個會員登入系統,接 API 後,拿到一個像這樣子的一筆 JSON 資料。

$.get('https://randomuser.me/api/',function(result){
  console.log(result)
});
{
    "firstName": "Hu",
    "lastName": "Jim",
    "sex": "male",
    "age": 18,
    "address": 
    {
        "streetAddress": "21 2nd Street",
        "city": "New York",
        "state": "NY",
        "postalCode": "10021"
    },
    "phoneNumber": 
    [
        {
         "type": "home",
         "number": "212 555-1234"
        },
        {
         "type": "fax",
         "number": "646 555-4567"
        }
   ]
}

思考:
什麼是 API ? 全名是應用程式接口( Application Programming Interface ) ,通常我們都直接說 API 。無論是在一個專案裡,由合作方提供的,或網路上公開讓大家使用的 API ,作用都在於資料的傳遞與服務的連接,提供一個標準的窗口。好比一個插座,我們使用電的服務,來使用不同的電器產品,但我們只需要知道電壓,不需要知道怎麼發電的。由上面的第一行我們可以看到「一段網址」,就是資料的提供來源。我們試著用 API 開發環境來跑看看。

什麼又是 JSON ?
通常我們會拿到一個物件或陣列格式,包物件或陣列的資料。這樣的結構我們稱為 JSON 。

{
  "results": [
    {"firstCol1": "data"},
    {"firstCol2": "data"},
    {"firstCol3": "data"},
    {"firstCol4": "data"},
    {"firstCol5": [
      {"SecCol1": "data"},
      {"SecCol2": "data"},
      {"SecCol3": "data"},
      {"SecCol4": "data"}
      ]
    } 
  ]     
}

看起來是物件或陣列,但在網路上傳遞資料的方式,是以字串的方式去處理的。所以我們必須使用 JSON.stringify 轉成字串,或 JSON.parse 去轉回物件或陣列。

再往回看一點點,我們到底在程式上要如何去接一個 API,可以使用 JS 原生的功能或者用套件,針對接 API 功能去處理,這裡提供五個例子,包含原始 XMLHttpRequest、jQuery、axios、superAgent、fetch。

接API的五種方式

最後我們拿到資料就可以進行畫面的呈現或資料的處理了!迫不及待!


上一篇
一個 JS 學習者的日常 day 4
下一篇
一個 JS 學習者的日常 day6
系列文
一個 JS 學習者的日常30

尚未有邦友留言

立即登入留言