HTTP Client 是用來向API Server 發起HTTP請求的服務，常見的解決方案有AJAX、Axios等等。有時候我們在開發的軟體的時候，會希望對每次HTTP請求做一些特別的處理，這時候就可以考慮自己實作一個簡單的HTTP Client，然後統一使用著個Client來發送HTTP 請求。

本文主要是包裝Web API中的fetch功能來實作，部分邏輯參考Kibana的source code https://github.com/elastic/kibana

完成後實際的使用情況大概會像這樣：

import http from './utils/httpService'

const fetchData = async () => {
	const options = { page: 1 }
	try {
		const list = await http.get('api/user', options)
	} catch (err) { 
		console.error(err) 
	}
}

上面的範例只使用了get方法，本文會實作get/post/put/delete方法

檔案架構

首先，先在utils裡面建立一個檔案，把他叫做httpService.js

這個服務預計會有以下幾個功能：

• 產生Request
• 呼叫原生fetch API (window.fetch)
• 包裝不同http method變成可直接使用的function

首先我們先來快速複習一下JavaScrip裡面的Request與Response

// 產生fetch所需的Request object
const request = new Request("url")

// 真的去做fetch，回傳Response，這邊用await等待Promise
const fetchData = async () => {
	const response = await window.fetch(request) 
}
fetchData()