使用 JavaScript 的 Fetch API 封裝的公共請求文件示例。這個示例包含了 POST、GET、PUT 等請求方法。請注意,您需要根據您的專案需求進行相應的調整。
// request.js
const BASE_URL = 'https://api.example.com';
const handleResponse = async (response) => {
if (response.ok) {
const data = await response.json();
return data;
} else {
const error = await response.text();
throw new Error(error);
}
};
const request = async (url, options) => {
try {
const response = await fetch(`${BASE_URL}${url}`, options);
const data = await handleResponse(response);
return data;
} catch (error) {
console.error('請求失敗:', error);
throw error;
}
};
export const get = (url, headers = {}) => {
const options = {
method: 'GET',
headers: {
'Content-Type': 'application/json',
...headers,
},
};
return request(url, options);
};
export const post = (url, body, headers = {}) => {
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
...headers,
},
body: JSON.stringify(body),
};
return request(url, options);
};
export const put = (url, body, headers = {}) => {
const options = {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
...headers,
},
body: JSON.stringify(body),
};
return request(url, options);
};
export const del = (url, headers = {}) => {
const options = {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
...headers,
},
};
return request(url, options);
};
使用這個封裝好的請求文件,您可以輕鬆地在專案中發起 GET、POST、PUT 等請求。例如:
import * as request from './request';
// GET 請求示例
request.get('/users')
.then(data => console.log(data))
.catch(error => console.error(error));
// POST 請求示例
request.post('/users', { name: 'John Doe', age: 30 })
.then(data => console.log(data))
.catch(error => console.error(error));
// PUT 請求示例
request.put('/users/1', { name: 'Jane Doe', age: 28 })
.then(data => console.log(data))
.catch(error => console.error(error));
// DELETE 請求示例
request.del('/users/1')
.then(data => console.log(data))
.catch(error => console.error(error));
請確保您的專案支援 Fetch API,或者使用 polyfill(如:whatwg-fetch)來增加對舊瀏覽器的支援。