实现一个函数 post(url, data)，发送 POST 请求

推荐答案

// www.javascriptcn.com code example
function post(url, data) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.setRequestHeader('Content-Type', 'application/json');

        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.responseText);
            } else {
                reject(new Error(`Request failed with status ${xhr.status}`));
            }
        };

        xhr.onerror = function() {
            reject(new Error('Request failed'));
        };

        xhr.send(JSON.stringify(data));
    });
}

本题详细解读

1. 函数定义

• post(url, data) 是一个异步函数，用于发送 POST 请求。
• url 是请求的目标地址。
• data 是要发送的数据，通常是一个对象。

2. XMLHttpRequest 对象

• 使用 XMLHttpRequest 对象来发送 HTTP 请求。
• xhr.open('POST', url, true) 初始化一个 POST 请求，true 表示异步请求。

3. 设置请求头

• xhr.setRequestHeader('Content-Type', 'application/json') 设置请求头，指定发送的数据格式为 JSON。

4. 处理响应

• xhr.onload 事件处理函数在请求成功完成时触发。
• 如果状态码在 200 到 299 之间，表示请求成功，调用 resolve 返回响应内容。
• 否则，调用 reject 返回错误信息。

5. 处理错误

• xhr.onerror 事件处理函数在请求失败时触发，调用 reject 返回错误信息。

6. 发送请求

• xhr.send(JSON.stringify(data)) 将数据转换为 JSON 字符串并发送请求。

7. Promise 的使用

• 函数返回一个 Promise 对象，便于调用者使用 then 和 catch 处理成功和失败的情况。

8. 异步处理

• 由于使用了 Promise，调用者可以使用 async/await 语法来简化异步代码的处理。