Promise封装ajax

// 封装一个基于Promise的ajax函数
function fetchData(url, options = {}) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(options.method || 'GET', url);
 
    // 设置请求头
    if (options.headers) {
      Object.keys(options.headers).forEach(key => {
        xhr.setRequestHeader(key, options.headers[key]);
      });
    }
 
    // 发送请求
    xhr.send(options.body);
 
    // 监听状态变化
    xhr.onreadystatechange = () => {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          // 请求成功
          resolve(xhr.responseText);
        } else {
          // 请求失败
          reject(new Error(`Status code: ${xhr.status}`));
        }
      }
    };
  });
}
 
// 使用示例
fetchData('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(data => {
  console.log('Data received:', data);
})
.catch(error => {
  console.error('Error fetching data:', error);
});

这个示例中的fetchData函数接受一个URL和一个配置对象作为参数，并返回一个Promise对象。它封装了XMLHttpRequest对象，使其能够以Promise风格调用。这样可以让异步代码更清晰，并简化错误处理。