javascript ajax 和 promise 合作处理 业务请求和 进度 的实际 代码

在JavaScript中，AJAX (Asynchronous JavaScript and XML) 被用来异步发送数据到服务器并接收响应，而Promise则用于处理异步操作的结果。当结合使用它们时，你可以创建一个更优雅的方式来处理业务请求及进度更新。

下面是一个简单的例子，展示如何使用`fetch` API发起AJAX请求，并通过Promise链来管理请求状态和处理进度：

function fetchData(url) {
  return new Promise((resolve, reject) => {
    // 创建一个XMLHttpRequest实例
    const xhr = new XMLHttpRequest();
    
    // 监听请求完成的状态变化
    xhr.onload = function () {
      if (xhr.status === 200) { // 请求成功
        resolve(xhr.response);
      } else {
        reject(new Error('Request failed with status ' + xhr.status));
      }
    };

    xhr.onerror = function () {
      reject(new Error('There was a network error'));
    };

    // 开始异步请求
    xhr.open('GET', url, true);
    xhr.send();
  });
}

// 使用Promise链处理请求和进度
function handleProgress(request) {
  request.then(response => {
    // 解析响应数据
    const data = JSON.parse(response);

    // 在这里处理数据，比如显示加载中...
    console.log('Loading data...');

    // 返回处理后的数据或进一步的Promise
    return processData(data);
  }).then(processedData => {
    // 处理完成，例如更新UI
    console.log('Data loaded successfully:', processedData);

    // 更新进度或其他后续任务
    updateProgress(100); // 假设这是一个模拟的进度更新函数
  }).catch(error => {
    // 指示错误或异常处理
    console.error('Error:', error.message);
  });
}

// 调用并处理请求
handleProgress(fetchData('https://api.example.com/data'));