原生XMLHttpRequest 封装 可上传formData格式数据

该封装的请求 包含 get post put delete cancel（取消请求）完成取消请求 

const baseUrl = "http://192.168.1.34:5555";

/**
 * @function createXhrRequest
 * @param {String} baseUrl 基础url
 * @param {Number} timeout 超时时间
 * @param {Object} defaultData 默认参数
 * @param {Object} head 请求头
 * @return {Object}
 */
const createXhrRequest = (
  {
    head = {},
    baseUrl = '',
    timeout = 30000,
    defaultData = {},
  } = {}) => {
  const isEmptyObject = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;

  const success = (resolve, res) => {
    if (res.code === 200) {
      resolve(res);
    } else {
      utils.msg.error(res.msg);
      reject(res);
    }
  }

  const error = (reject, err) => {
    if (err.status === 0) return;
    utils.msg.error(err.msg || '请求失败');
    reject(err);
  }

  const paramsToFormData = (obj) => {
    const formData = new FormData();
    Object.keys(obj).forEach((key) => {
      if (Array.isArray(obj[key])) {
        obj[key].forEach((item, index) => {
          if (typeof item !== 'object') {
            formData.append(key, item);
          } else {
            Object.keys(item).forEach((arrKey) => {
              if (item[arrKey]) {
                formData.append(`${key}[${index}].${arrKey}`, item[arrKey]);
              }
            })
          }
        });
      } else if (obj[key] != null) {
        formData.append(key, obj[key]);
      }
    });
    return formData;
  }

  const setHeaders = (xhr) => {
    if (!isEmptyObject(head)) {
      Object.keys(head).forEach(key => {
        xhr.setRequestHeader(key, head[key])
      })
    }
  }

  const handleReadyStateChange = (xhr, key, resolve, reject, requestTasks) => {
    return () => {
      if (xhr.readyState === 4) {
        requestTasks.delete(key);
        if (xhr.status === 200) {
          try {
            let res = JSON.parse(xhr.response);
            success(resolve, res);
          } catch (e) {
            error(reject, { status: xhr.status, msg: '解析响应失败' });
          }
        } else {
          error(reject, xhr);
        }
      }
    }
  }

  const createRequest = (key, requestTasks) => {
    const xhr = new XMLHttpRequest();
    xhr.timeout = timeout;
    requestTasks.set(key, xhr);
    return xhr;
  }

  const requestTasks = new Map();

  const request = {
    // 当前上传进度
    nowSchedule: '',

    get: (url, params, key) => {
      let xhr = createRequest(key, requestTasks);
      let defaultUrl = url;
      if (!isEmptyObject(defaultData)) {
        params = { ...params, ...defaultData };
      }
      if (params) {
        const queryString = Object.keys(params).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`).join('&');
        defaultUrl += (url.includes('?') ? '&' : '?') + queryString;
      }
      const getUrl = baseUrl + defaultUrl;
      return new Promise((resolve, reject) => {
        xhr.open('GET', getUrl, true);
        setHeaders(xhr);
        xhr.onreadystatechange = handleReadyStateChange(xhr, key, resolve, reject, requestTasks);
        xhr.send();
      })
    },

    post: (url, params, key, type = 'json') => {
      let xhr = createRequest(key, requestTasks);
      const postUrl = baseUrl + url;
      return new Promise((resolve, reject) => {
        xhr.open('POST', postUrl, true);
        setHeaders(xhr);
        if (type === 'json') {
          xhr.setRequestHeader("Content-Type", "application/json");
          xhr.send(JSON.stringify(params));
        } else if (type.toLowerCase() === 'formdata') {
          const formData = paramsToFormData(params);
          xhr.upload.onprogress = (event) => {
            if (event.lengthComputable) {
              request.nowSchedule = `${(event.loaded / event.total) * 100}%`;
            }
          }
          xhr.send(formData);
        } else {
          error(reject, {status: 0, msg: 'post请求中type只支持form和json两种格式'});
        }
        xhr.onreadystatechange = handleReadyStateChange(xhr, key, resolve, reject, requestTasks);
      })
    },
  
    put: (url, params, key) => {
      let xhr = createRequest(key, requestTasks);
      const putUrl = baseUrl + url;
      return new Promise((resolve, reject) => {
        xhr.open('PUT', putUrl, true);
        setHeaders(xhr);
        xhr.setRequestHeader("Content-Type", 'application/json');
        xhr.send(JSON.stringify(params));
        xhr.onreadystatechange = handleReadyStateChange(xhr, key, resolve, reject, requestTasks);
      })
    },

    delete: (url, params, key) => {
      let xhr = createRequest(key, requestTasks);
      if (params) {
        const queryString = Object.keys(params).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`).join('&');
        url += (url.includes('?') ? '&' : '?') + queryString;
      }
      const deleteUrl = baseUrl + url;
      return new Promise((resolve, reject) => {
        xhr.open('DELETE', deleteUrl, true);
        setHeaders(xhr);
        xhr.onreadystatechange = handleReadyStateChange(xhr, key, resolve, reject, requestTasks);
        xhr.send();
      })
    },

    cancel: (key) => {
      let xhr = requestTasks.get(key);
      if (xhr) {
        xhr.abort();
        requestTasks.delete(key);
        console.log(`已取消请求：${key}`);
      }
    },
  }

  return request;
}

const request = createXhrRequest({baseUrl});

for (let i = 0; i <= 10; i++) {
  const key = `/note-published/${i}`;
  request.get('/note-published', null, key).then(res => {
    console.log(res, 'res');
  })
}

// 示例：取消某个请求
request.cancel('/note-published/5');

和axios 一样的调用方式 列：

const regionList = (data) => requestOne.get("/sys/region/list", data);

utils 中的msg内容 （可删除）

 // 提示信息
  msg: {
    // 设置icon 自定义添加
    iconSuccess: '/static/images/success.svg',
    iconError: '/static/images/error.svg',
    iconInfo: '',
    message: document.createElement("p"),
    body: document.getElementsByTagName("body")[0],
    init: () => {
      utils.msg.message.id = "message";
      utils.msg.message.style.top = "-82%";
      utils.msg.message.style.left = "0px";
      utils.msg.message.style.right = "0px";
      utils.msg.message.style.bottom = "0px";
      utils.msg.message.style.zIndex = "9999";
      utils.msg.message.style.margin = "auto";
      utils.msg.message.style.height = "45px";
      utils.msg.message.style.width = "400px";
      utils.msg.message.style.display = "flex";
      utils.msg.message.style.position = "fixed";
      utils.msg.message.style.borderRadius = "6px";
      utils.msg.message.style.alignItems = "center";
      utils.msg.message.style.justifyContent = "center";
    },
    clearMsg: () => {
      if (document.getElementById("message")) {
        document.getElementById("message").remove();
      }
    },
    success: (text) => {
      // 如果有 则给它删除掉 只保留一个
      utils.msg.clearMsg();
      utils.msg.init();
      utils.msg.message.style.color = "rgb(105, 194, 66)";
      utils.msg.message.style.backgroundColor = "rgb(240, 249, 235)";
      utils.msg.message.style.border = "1px solid rgb(225, 243, 217)";
      utils.msg.message.innerHTML = `
      <p
        style="
          display:flex;
          align-items: center;
        ">
        <img
          style="
            display: ${utils.msg.iconSuccess ? 'block' : 'none'};
            width: 24px;
            margin-right: 10px;
          "
          src="${utils.msg.iconSuccess}"
        />
        ${text}
      <p>`;
      utils.msg.body.appendChild(utils.msg.message);
      // N 秒之后如果还有 则给它移除掉
      setTimeout(() => {
        if (document.getElementById("message")) {
          document.getElementById("message").remove();
        }
      }, 5000);
    },
    error: (text) => {
      // 如果有 则给它删除掉 只保留一个
      utils.msg.clearMsg();
      utils.msg.init();
      utils.msg.message.style.color = "rgb(245, 108, 108)";
      utils.msg.message.style.backgroundColor = "rgb(254, 224, 224)";
      utils.msg.message.style.border = "1px solid rgb(252, 211, 211)";
      utils.msg.message.innerHTML = `
      <p
        style="
          display:flex;
          align-items: center;
        ">
          <img
            style="
              display: ${utils.msg.iconError ? 'block' : 'none'};
              width: 24px;
              margin-right: 10px;"
            src="${utils.msg.iconError}"
          />
          ${text}
        <p>`;
      utils.msg.body.appendChild(utils.msg.message);
      // N 秒之后如果还有 则给它移除掉
      setTimeout(() => {
        if (document.getElementById("message")) {
          document.getElementById("message").remove();
        }
      }, 5000);
    },
    info: (text) => {
      // 如果有 则给它删除掉 只保留一个
      utils.msg.clearMsg();
      utils.msg.init();
      utils.msg.message.style.color = "rgb(105, 194, 66)";
      utils.msg.message.style.backgroundColor = "rgb(240, 249, 235)";
      utils.msg.message.style.border = "1px solid rgb(225, 243, 217)";
      utils.msg.message.innerHTML = `
      <p
        style="
          display:flex;
          align-items: center;
        ">
        <img
          style="
            width: 24px;
            margin-right: 10px;
            display: ${utils.msg.iconInfo ? 'block' : 'none'}
          "
          src="${utils.msg.iconInfo}"
        />
        ${text}
      <p>`;
      utils.msg.body.appendChild(utils.msg.message);
      // N 秒之后如果还有 则给它移除掉
      setTimeout(() => {
        if (document.getElementById("message")) {
          document.getElementById("message").remove();
        }
      }, 5000);
    },
  },