js原生http请求

### 使用原生 JavaScript 发送 HTTP 请求

现代浏览器提供了多种方法来通过原生 JavaScript 进行网络请求。最常用的方式是使用 `fetch` API 和传统的 `XMLHttpRequest` 对象。

#### Fetch API 方法

Fetch 提供了一个更强大和灵活的接口用于获取资源，支持 Promise 并且语法更加简洁[^1]：

// GET 请求示例
function fetchData(url) {
    fetch(url)
        .then(response => response.json()) // 将响应转换为 JSON 格式
        .then(data => console.log(data))   // 处理返回的数据
        .catch(error => console.error('Error:', error)); // 错误处理
}

// POST 请求示例
async function postData(url = '', data = {}) {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json'
      },
      body: JSON.stringify(data),
    });
    
    return response.json(); // 解析JSON 响应体并返回
}

#### XMLHttpRequest 方法 (传统)

尽管推荐使用 Fetch API，但在某些情况下可能仍需兼容旧版浏览器，则可以考虑使用 `XMLHttpRequest`:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log(json); 
    }
};
xhr.send(null);

// 或者对于 POST 请求
var xhrPost = new XMLHttpRequest();
xhrPost.open("POST", "https://api.example.com/postData", true);
xhrPost.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhrPost.onreadystatechange = function() { ... };
xhrPost.send("param1=value1&param2=value2");