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
留言分享你的想法!
avatar-img
Jeremy Ho的沙龍
19會員
37內容數
這個專題用來存放我在學習網頁開發時的心得及知識。
Jeremy Ho的沙龍的其他內容
2023/11/22
用 vue3-openlayers 畫張地圖吧
Thumbnail
2023/11/22
用 vue3-openlayers 畫張地圖吧
Thumbnail
2023/11/13
Vue3 筆記,指令進階篇
Thumbnail
2023/11/13
Vue3 筆記,指令進階篇
Thumbnail
2023/11/12
Vue3 學習筆記,vue-router 篇。
Thumbnail
2023/11/12
Vue3 學習筆記,vue-router 篇。
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
JSON(JavaScript Object Notation)是AJAX(參考:[PHP][AJAX]介紹)常用的資料交換格式。在PHP有提供函數,可以將資料轉換成JSON。除外JSON比XML快速且簡單。 語法 資料是由鍵和值(Key-value)組成。 鍵和值之間用「:」區隔。 資料之
Thumbnail
JSON(JavaScript Object Notation)是AJAX(參考:[PHP][AJAX]介紹)常用的資料交換格式。在PHP有提供函數,可以將資料轉換成JSON。除外JSON比XML快速且簡單。 語法 資料是由鍵和值(Key-value)組成。 鍵和值之間用「:」區隔。 資料之
Thumbnail
AJAX(Asynchronous JavaScript And XML)為JavaScript和XML的非同步技術,可以讓瀏覽器建立快速、更加和容易使用的操作介面。AJAX核心技術是非同步的HTTP請求(Asynchronous HTTP Requests),除了第一次載入網頁外,HTTP請求是在
Thumbnail
AJAX(Asynchronous JavaScript And XML)為JavaScript和XML的非同步技術,可以讓瀏覽器建立快速、更加和容易使用的操作介面。AJAX核心技術是非同步的HTTP請求(Asynchronous HTTP Requests),除了第一次載入網頁外,HTTP請求是在
Thumbnail
歡迎來到 React 白話文運動第三篇,今天我們將深入探討 JavaScript 中的非同步操作,並介紹兩個重要的關鍵字:Async 與 Await。在這篇文章中,我們將透過實例演示非同步操作的概念,以及如何使用 Promise、Fetch、Async 和 Await 來更有效地處理非同步程式。
Thumbnail
歡迎來到 React 白話文運動第三篇,今天我們將深入探討 JavaScript 中的非同步操作,並介紹兩個重要的關鍵字:Async 與 Await。在這篇文章中,我們將透過實例演示非同步操作的概念,以及如何使用 Promise、Fetch、Async 和 Await 來更有效地處理非同步程式。
Thumbnail
呼叫API,並透過API響應的內容取到需要的值
Thumbnail
呼叫API,並透過API響應的內容取到需要的值
Thumbnail
記錄一下 API 串接的四種方式 www
Thumbnail
記錄一下 API 串接的四種方式 www
Thumbnail
API 是軟體串接的根本、資料互拋的媒介。它普遍出現在我們生活應用中,就是交換資訊的管道。透過 API 將不同軟體的資訊整合分享,既能將不同軟體的資料呈現在你的既有軟體,也能擴充新功能!現在 NoCode 自動化工具內含已整合好 API 的眾多軟體模組,讓你不用寫程式,選取想整合的軟體就能完成串接!
Thumbnail
API 是軟體串接的根本、資料互拋的媒介。它普遍出現在我們生活應用中,就是交換資訊的管道。透過 API 將不同軟體的資訊整合分享,既能將不同軟體的資料呈現在你的既有軟體,也能擴充新功能!現在 NoCode 自動化工具內含已整合好 API 的眾多軟體模組,讓你不用寫程式,選取想整合的軟體就能完成串接!
Thumbnail
接下來要講前後端怎麼溝通,最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論,個人推薦使用 axios,那他們又有什麼優缺點呢?讓我簡單講解一下 ajax ajax 用法有點麻煩,要先引入 jQuery,用法如下 ajax 比起 axios 較為笨重也較不安全
Thumbnail
接下來要講前後端怎麼溝通,最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論,個人推薦使用 axios,那他們又有什麼優缺點呢?讓我簡單講解一下 ajax ajax 用法有點麻煩,要先引入 jQuery,用法如下 ajax 比起 axios 較為笨重也較不安全
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News