【ES6】掌握Promise和利用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(JSON.parse(xhr.responseText));
        } else {
          // 请求失败
          reject(new Error(`Error: ${xhr.status}`));
        }
      }
    };
  });
}
 
// 使用封装好的函数发送GET请求
fetchData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error(error));
 
// 使用封装好的函数发送POST请求
fetchData('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(data => console.log(data))
  .catch(error => console.error(error));

这段代码定义了一个名为fetchData的函数，它接受一个URL和一个选项对象作为参数。这个函数返回一个Promise，它在请求完成时通过resolve调用，在请求失败时通过reject调用。这个封装可以用来发送GET和POST请求，并且可以很容易地处理HTTP响应。