Fetch 请求的 GET 和 POST 封装

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);