Web開發學習筆記15 — AJAX、API、JSON、Axios

什麼是AJAX？

簡單來說，我們可以讓JavaScript發送請求資料的需求給伺服器，而伺服器僅回傳給我們必要的資料，而非整個被渲染過的網頁。這使得伺服器回應更快，同時，Web伺服器的負荷也跟著減少。

什麼是API？

API就像是接口一樣，讓我們可以向API請求一些資料，然後API回應(response)我們，我們再把這些資料放進網頁中。例如今天我們想製作一個即時天氣的網站，我們可以透過天氣的API取得即時天氣的資料，並加入到HTML、CSS、JavaScript編寫好的完整的網站中。

XML與JSON

比較準確點來說XML是標記式語言，而JSON是資料交換語言的一種。當我們向API請求資料，API響應給我們的資料就會是這種純數據的資料。
XML的通用性較廣泛，有許多基於XML創造出來的應用程序、格式，包括XForms，SVG，MathML，RDF，OWL，WSDL等。
而相較於XML，JSON就屬於輕量級的資料交換語言，更易於閱讀，運用JSON.parse()我們可以解析JSON字串並返回JavaScript的物件形式。JSON.stringify()則是將物件轉換為JSON形式。
以現在常用的技術AJAX來說，JSON的J已經逐漸取代AJAX的"X"，JSON雖然沒有像XML那麼廣泛、強大，但以網站傳輸資料檔案來說JSON更快、更易讀，且現今更多人使用此來當作資料交換的語言。

Postman

Postman是一個幫助我們測試API的工具。在我們使用這個API之前，我們要先測試這個API是否能正確運作，此時Postman就可以模擬HTTP Request的情形。

AJAX實現方式

XMLHttpRequest（XHR）

XMLHttpRequest（XHR）是一組API函式集，可被JavaScript呼叫。我們可以通過HTTP在瀏覽器和web伺服器之間收發XML或JSON、純文字。它強大的點在於可以取得資料的同時，也可以動態地更新網頁，而不需要進行頁面重載。不過XHR算是一個舊的方法，且它不支援Promise，因此會造成複雜的callback hell，現在有fetch()能幫我們取得API資料，它更簡單、簡潔，避免了callback hell。

fetch（IE不支援）

fetch是JavaScript的原生API，透過fetch我們可以向HTTP Request。fetch是基於Promise的，所以用法上會接.then，或是可以使用async。

//一個簡單的Request，使用.then連結資料
fetch('https://api.coindesk.com/v1/bpi/historical/close.json').then(res => {
    return res.json();
}).then(data => {
    console.log(data.time.updated)
}).catch(e => {
    console.log(e);
})

//一個簡單的Request，使用async連結資料
const fetchAPI = async() => {
    try {
        const res = await fetch('https://api.coindesk.com/v1/bpi/historical/close.json')
        const data = await res.json()
        console.log(data.time.updated)
    } catch (err) {
        console.log(err)
    }
}
fetchAPI();

Axios

相比起jQuery，Axios顯得輕量，一樣支援Promise語法，且能夠自動轉換JSON數據，主流瀏覽器都能支援Axios。以目前的趨勢來看，越來越多工程師選擇使用Axios。
用Axios改寫上面的範例，看起來又簡潔了一些呢：

//CDN:
//<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios.get('https://api.coindesk.com/v1/bpi/historical/close.json')
    .then(res => console.log(res.data.time.updated))
    .catch(err => console.log(err))

jQuery（$.ajax）

串接API常會用的到的JavaScript函式庫，缺點在於為了要用AJAX功能必須載入整個 jQuery。

Axios練習

安裝Axios：axios - github

設置headers

每個API的使用方式都不相同（所以一定要看官方Document），在此以icanhazdadjoke為例，如果想取得此API的JSON資料，必須設定headers：

//headers的寫法，像是物件一樣：
const header = { headers: { Accept: 'application/json' } }
axios.get('https://icanhazdadjoke.com/', header).then(res => {
    console.log(res.data.joke)
})

用icanhazdadjoke試做笑話產生器（超級陽春版）

const button = document.querySelector('button');
const ul = document.querySelector('ul')

const gotJokes = async() => {
    const header = { headers: { Accept: 'application/json' } }
    const res = await axios.get('https://icanhazdadjoke.com/', header)
    return res.data.joke
}

let addJokes = async() => {
    let textJokes = await gotJokes()
    let li = document.createElement('li')
    li.textContent = textJokes
    ul.appendChild(li)
}

button.addEventListener('click', addJokes)

參考資料：

1. 關於AJAX與那些前端的request方法
2. 在開始寫Code之前？
3. JavaScript - 常見的 AJAX 實現方式
4. Axios or fetch(): Which should you use?
5. Stop Comparing JSON and XML