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

更新於 發佈於 閱讀時間約 13 分鐘

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

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

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

raw-image

在開始之前,先把前置作業做好:

// 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

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 裡面說的會拿到的資料啦。

raw-image

備註一下,接下來我所有的 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
avatar-img
18會員
37內容數
這個專題用來存放我在學習網頁開發時的心得及知識。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Jeremy Ho的沙龍 的其他內容
有關 git add, git commit, git push
有關 git add, git commit, git push
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
API(Application Programming Interface,應用程式介面)可以視為不同軟體系統之間的溝通橋梁,讓雙邊可以交換數據並執行各種功能。這篇會記錄產品經理一定要知道的幾個 API 概念,像是常見的錯誤代碼以及不同的 HTTP 方法(如 PUT、GET、POST)和實際案例說明
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
Thumbnail
可選串聯(?.)運算符用於訪問 object 的屬性或調用函數。如果使用該運算符訪問的object 或調用的函式為 undefined 或 null,則表達式會回傳 undefined,而不是拋出錯誤。
※ 什麼是 RESTful API? 這種運用 HTTP 來表達語義的路由設計風格稱為 RESTful API,它描述了如何實現 Web API 的架構。所謂的 API 是應用程式介面 (application programming interface),網址也是一種應用程式的「介面」,故稱為
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
Webhook 提供一個「即時觸發」的資料傳送方式。Webhook 與 API 的差異及在自動化流程中的作用是什麼?它讓你在事件發生時獲得通知。透過生活化的情境舉例,理解 Webhook 的運作原理,並了解如何透過 No Code 自動化工具設定 Webhook,實現自動化整合,提升工作效率!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
在之前的文章當中曾經提到過 JavaScript 中的物件有一個特別的機制:傳參考(Called by reference),如果正確性再高一點的話,則可以稱之為傳共享(Called by sharing)。
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
API(Application Programming Interface,應用程式介面)可以視為不同軟體系統之間的溝通橋梁,讓雙邊可以交換數據並執行各種功能。這篇會記錄產品經理一定要知道的幾個 API 概念,像是常見的錯誤代碼以及不同的 HTTP 方法(如 PUT、GET、POST)和實際案例說明
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
Thumbnail
可選串聯(?.)運算符用於訪問 object 的屬性或調用函數。如果使用該運算符訪問的object 或調用的函式為 undefined 或 null,則表達式會回傳 undefined,而不是拋出錯誤。
※ 什麼是 RESTful API? 這種運用 HTTP 來表達語義的路由設計風格稱為 RESTful API,它描述了如何實現 Web API 的架構。所謂的 API 是應用程式介面 (application programming interface),網址也是一種應用程式的「介面」,故稱為
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
Webhook 提供一個「即時觸發」的資料傳送方式。Webhook 與 API 的差異及在自動化流程中的作用是什麼?它讓你在事件發生時獲得通知。透過生活化的情境舉例,理解 Webhook 的運作原理,並了解如何透過 No Code 自動化工具設定 Webhook,實現自動化整合,提升工作效率!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
在之前的文章當中曾經提到過 JavaScript 中的物件有一個特別的機制:傳參考(Called by reference),如果正確性再高一點的話,則可以稱之為傳共享(Called by sharing)。