某条前端面试题--实现一个封装的ajax器（Promise版）

题目描述

实现一个封装ajax器，功能有

1. 限制一次同时发送的ajax请求数量m个
2. timeout限制
3. 重试n次

前置知识

XMLHttpRequest

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用

简单介绍下，具体内容大家可以去MDN上查看。

open()：初始化一个请求

send()：发出请求

abort()：如果请求已被发出，则立刻中止请求。

readyState、status属性：用来判断请求是否完成。一般readyState !== 4 && status === 0就说明请求完成了。

timeout属性：表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。

Fetch

Fetch API 提供了一个获取资源的接口（包括跨域请求）。fetch() 必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的 Response。你也可以传一个可选的第二个参数 init（参见 Request）。

只提一下需要的内容，具体内容大家还是去MDN上查看。

fetch() 方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。

需要注意的是：当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500，它也会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值Response 对象的 ok 属性设置为 false ）。仅当网络故障时或请求被阻止时，Promise 状态才会标记为 reject。

中止 fetch

浏览器已经开始为 AbortController 和 AbortSignal 接口（也就是Abort API）添加实验性支持，允许像 Fetch 和 XHR 这样的操作在还未完成时被中止 。

解题思路

ajax可以使用XMLHttpRequest封装，也可以使用现成的Fetch加以改造实现附加功能。

XMLHttpRequest

优点：灵活，可操作性强，有中止请求、超时设置、多种事件监听方法

缺点：麻烦

Fetch

优点：使用方便，发送带凭据的请求、上传 JSON 、上传文件数据等常见场景都能覆盖

缺点：只能设置Request对象，没有XMLHttpRequest，没有超时设置的属性API

这里xhr还是采用了Fetch，我实在太懒了，不想去监听事件各种判断，封装一系列的get、post等等方法。对于Fetch没有超时设置的属性API，借助定时器和中止 fetch的API完成。

实现部分

队列

我这里用了一个队列，来保存发送的ajax请求，当达到最大请求数量，就保存在队列里，等待连接。

实现一个队列，一般要实现进队、出队的方法，符合先进先出的原则，同时也要实现查询队满、队空的状态。
因为如果进出队次数过多会造成数组过大，为了不造成浪费，这里就实现的是循环队列。

//实现一个队列
class Queue{
   
    constructor(size){
   
        this.size = size;
        this.data = Array(size);
        this.front = 0;
        this.rear = 0;
    }

    in(url){
   
        if(this.isFull()) return false;
        this.data[this.rear] = url;
        this.rear = (this.rear+1)%this.size;
        return true;
    }

    out(){
   
        let res = null;
        if(this.isEmpty()) return res;
        res =  this.data[this.front];
        this.data[this.front] = null;
        this.front