Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应。它还提供了一个全局
fetch()
方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。这种功能以前是使用
XMLHttpRequest
实现的。Fetch 提供了一个更理想的替代方案,可以很容易地被其他技术使用,例如Service Workers
。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念,例如 CORS 和 HTTP 的扩展。
使用 Fetch 封装的 GET 和 POST 请求:
import 'whatwg-fetch';
// 统一对 get 方法进行封装
export const get = async (url, data = {}) => {
try {
// 拼接 get 请求参数
let query = '';
Object.entries(data).forEach(([key, value], index) => {
query = query + index === 0 ? '?' : '&';
query += `${key}=${value}`;
});
// 发送异步请求
const response = await fetch(`${url}${query}`);
const res = await response.json();
return res;
} catch (error) {
alert("GET 请求失败!");
console.log(error);
}
};
// 统一对 post 方法进行封装
export const post = async (url, data = {}) => {
try {
const response = await fetch(url, {
method: 'POST', // 默认为 GET 请求
body: JSON.stringify(data)
});
const res = await response.json();
return res;
} catch (error) {
alert("POST 请求失败!");
console.log(error);
}
};
使用方法:
const data = await post('/api/register', {
username,
tel,
password,
repassword
});
console.log(data);