重拾封装后的Ajax器(Promise版)-技术指南

2023-10-17 03:07:14

在前端面试中，经常会出现这样的题目：实现一个封装的Ajax器（Promise版）。对于这个问题，我们可以按照以下步骤来实现：

创建一个Ajax类的构造函数，并在其中定义必要的属性和方法。
在Ajax类中定义一个send方法，该方法用于发送Ajax请求。
在send方法中，使用Promise对象来封装Ajax请求。
在Promise对象中定义then方法，该方法用于处理Ajax请求的成功和失败。
在then方法中，我们可以对Ajax请求的返回数据进行处理，也可以对请求失败的情况进行处理。

下面是一个封装的Ajax器的示例代码：

class Ajax {
  constructor() {
    this.xhr = new XMLHttpRequest();
  }

  send(url, method, data) {
    return new Promise((resolve, reject) => {
      this.xhr.open(method, url);
      this.xhr.setRequestHeader('Content-Type', 'application/json');
      this.xhr.send(JSON.stringify(data));

      this.xhr.onload = () => {
        if (this.xhr.status === 200) {
          resolve(this.xhr.response);
        } else {
          reject(new Error(this.xhr.statusText));
        }
      };

      this.xhr.onerror = () => {
        reject(new Error('Network Error'));
      };
    });
  }
}

const ajax = new Ajax();
ajax.send('http://example.com/api/users', 'GET').then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});