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

ak biu biu biu

已于 2024-06-07 16:34:24 修改

阅读量1.1k

点赞数 9

文章标签： js http

于 2024-01-23 15:33:10 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45319906/article/details/135773024

版权

本文介绍了一个使用JavaScript实现的AJAX封装函数，包括GET、POST、PUT、DELETE和CANCEL请求方法，以及处理超时和错误的机制。函数提供了一致的接口，便于在项目中管理网络请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该封装的请求包含 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(