API前後端串接

今日学习目标

• API 前後端串接
  • 建立一个鸢尾花朵分类器的网页

API URL

采用 Day 26 部署在 Heroku 的 API 来跟网页前端串接。

API 传送门

使用 ES6 Fetch API

HTTP Request 在网页有很多种方式可以实作，像是 ajax、axios、Fetch...等。其中 Fetch 是 ES6 的新语法，意味着最新版浏览器可支援的原生函式库。其优点是不需而外载入其他函式库，Fetch 主要是透过 Promise 来执行请求资料和接收 HTTP Response 的处理方式。

下面程序参考 Fetch-MDN-Mozilla 透过建立 postData() 函式，开发者可以重复呼叫做 HTTP Request。其用法直接传入 API URL 以及需要 POST 的资料即可。

function postData(url, data) {
    // Default options are marked with *
    return fetch(url, {
        body: JSON.stringify(data), // must match 'Content-Type' header
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, same-origin, *omit
        headers: {
            'user-agent': 'Example',
            'content-type': 'application/json'
        },
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        redirect: 'follow', // manual, *follow, error
        referrer: 'no-referrer', // *client, no-referrer
    })
        .then(response => response.json()) // 输出成 json
}

const url = 'Your API Request URL';
const data = '{ Your data need JSON Object format }';
    
postData(url, data)
.then(data => {
    // response
    const result=data.result ;
})
.catch(error => console.error(error))

Demo

Demo网页

本系列教学简报 PDF & Code 都可以从我的 GitHub 取得！