API | 四種常見的 API 串接方法

API 串接是前端很重要的技術，但是這篇不是來解釋什麼是 API (想知道的看這裡)，而是記錄當前比較常用來串接 API 的四種方法：Ajax、jQuery Ajax、Fetch API 和 Axios 的基礎用法。

這篇文章要串接 RANDOM USER GENERATOR 這個 API 來簡單做個可互動的網頁：在點擊按鈕後就隨機跑出一筆使用者資料。

這是 ALPHA Camp 學期 2-2 的作業，但作業是用 Axios 串的，所以這次我要使用其他三種方法串串看。先上個成果圖：

在開始之前，先把前置作業做好：

// HTML
<div class="container">
        <button id='find'>Random User</button>
        <div id='show'></div>
</div>

// JavaScript
const find = document.querySelector("#find")
const show = document.querySelector("#show")
let apiUrl = 'https://randomuser.me/api/'

let name = ''
let img = ''
let email = ''

然後建議先去 RANDOM USER GENERATOR 看看，它會有一些解說該怎麼串接，然後串接完成會獲得什麼資料。

from: RANDOM USER GENERATOR

Ajax

全名 Asynchronous JavaScript and XML，是最早最早串接 API 的方法，而 Ajax 的出現開始讓網頁實現非同步請求，可以說現在的 API 串接方法都奠基在 Ajax 上。但它也因為是最老的，所以相對也是最複雜的。

具體步驟有四個：

1. 建立 XMLHttpRequest 物件。
2. 開啟一個請求。
3. 送出請求。
4. 拿到回應後需要瀏覽器做什麼。

const ajaxFunc = ()=>{
    // 以 XMLHttpRequest 物件的方法抓取資料
    xhr = new XMLHttpRequest()
    // 開啟一個請求，這裡使用 GET，true 為非同步的意思
    xhr.open('GET',apiUrl, true)
    // 送出請求
    xhr.send()

    xhr.onload = function () {
        if(xhr.status === 200){
            let data = JSON.parse(this.responseText)
            console.log(data)
            let user = data.results[0]
            name = `${user.name.first} ${user.name.last}`
            img = user.picture.large
            email = user.email
            show.innerHTML = `<h3>${name}</h3>
                <img src=${img}>
                <p>${email}</p>`
        }else{
            console.error(error)
        }
    }
}

find.addEventListener('click',()=>{
    ajaxFunc()
})

在onload的部分，我有用console.log(data)來檢視瀏覽器所取得的資料，會長像下圖那樣，其實就是 RANDOM USER GENERATOR 裡面說的會拿到的資料啦。

備註一下，接下來我所有的 API 串接方法都會包在一個函式裡面 (像是 ajaxFunc)，然後再把它綁到事件監聽器去。

jQuery Ajax

這個是使用 jQuery 函式庫提供的 Ajax 方法，它簡化了非同步請求的程式碼。但因為它必須使用到 jQuery，所以必須先把它載入到專案中。

// 在 HTML 的 head 中加入這段​
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然後接下來我們可以看看它的寫法：

const jAjaxFunc = ()=>{
    $.ajax({
        url: apiUrl,
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            let user = data.results[0]
            name = `${user.name.first} ${user.name.last}`
            img = user.picture.large
            email = user.email

            show.innerHTML =
                `<h3>${name}</h3>
                <img src=${img}>
                <p>${email}</p>`
        },
        error: function (error) {
            console.error(error)
        }
    })
}

find.addEventListener('click', ()=>{
    jAjaxFunc()
})

也就是它會列出：

1. url：我要向誰請求。
2. type：請求方法。
3. dataType：請求資料類型。
4. success：請求資料成功時該幹嘛。
5. error：請求資料失敗時該幹嘛。

嗯，比起 Ajax，語法已經較清晰好理解了，但似乎還是不夠直觀？沒關係，後面還有兩個方法壓軸。

Fetch API

作為相對年輕的 API 串接方法，它是基於 Promise 語法的 API 串接方式，變得更簡潔、更好讀了。

用 Fetch API，上面的 code 會變這樣：

const fetchFunc = ()=>{
    fetch(apiUrl)
    .then(response => response.json())
    .then(data =>{
        console.log(data)
        let user = data.results[0]
        name = `${user.name.first} ${user.name.last}`
        img = user.picture.large
        email = user.email

        show.innerHTML = `
            <h3>${name}</h3>
            <img src=${img}>
            <p>${email}</p>`
    })
    .catch(error => console.log(error))
}

find.addEventListener('click', ()=>{
    fetchFunc()
})

看，感覺又直觀清楚了許多，最後來看看 Axios。

Axios

Axios 跟 Fetch API 一樣都是比較新的 API 串接方法，並且同樣也是基於 Promise，在提供非同步處理時也讓整個程式碼更簡潔易讀。

不過因為 Axios 是屬於第三方函式庫，所以使用前必須先引入：

// 在 HTML 的 head 中加入這段​
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

或是可以直接透過npm install axios把整個 Axios 函式庫裝入本地專案中，那這樣我們必須在 JavaScript 檔案中把 Axios 給引入：

import axios from 'axios'

接下來直接來看用 Axios 做串接，上面的程式碼會變怎樣。

const axiosFunc = ()=>{
    axios
    .get(apiUrl)
    .then((response) => {
        console.log(response.data)
        let user = response.data.results[0];
        name = `${user.name.first} ${user.name.last}`;
        img = user.picture.large;
        email = user.email;
        show.innerHTML =
            `<h3>${name}</h3>
            <img src=${img}>
            <p>${email}</p>`;
    })
    .catch((error) => console.log(error));
}

find.addEventListener('click', ()=>{
    axiosFunc()
})

看起來是不是長得跟 Fetch API 很類似，但他們還是有些差異的，比如 Fetch API 會需要我們手動進行 JSON 解析，所以需要response.json()，而 Axios 會直接幫我們解析 JSON。同時 Axios 預設也會自動處理所有的 HTTP 狀態，包括錯誤的狀態，所以平心而論，Axios 還是提供了比較多的便利功能。

題外話：關於非同步

我不知道大家有沒有這個疑惑：為什麼我不把show.innerHTML寫在事件監聽器裡，而是寫在 API 的串接函式中。

// 原本的寫法
​find.addEventListener('click', ()=>{
    axiosFunc()
})

// 更改後的寫法
find.addEventListener('click', ()=>{
    axiosFunc()
    show.innerHTML =
            `<h3>${name}</h3>            
             <img src=${img}>            
             <p>${email}</p>`
})​

使用下面更改後的寫法，會發現我在第一次點擊按鈕時並沒有畫面跑出來，但第二次之後的點擊就有了，為什麼？

其實這裡跟非同步機制有關，下面更改後的寫法當我們點擊按鈕時的確會先觸發 axiosFunc，但是要注意，axiosFuc帶著的實際上是一個非同步請求，所以他不會去阻塞後續程式碼的執行，所以當show.innerHTML執行時，name、img、email 實際上是還沒被賦值的。大家可以參考一下JS 筆記 | Event Loop，會清楚很多。

參考資料

1. JavaScript 初心者筆記: AJAX - 從遠端即時撈取資料
2. Ajax - 以 GET 方法串接 API 資料 ( 以 JSON 為例 )
3. 使用 jQuery的 $.Ajax() 技術和介接api吧!
4. axios