XMLHttpRequest原生，xhr发送接口请求

接口

使用原生发送接口请求，获取请求进度–POST

下载压缩包

// 创建一个新的 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();

    // 初始化请求
    xhr.open('POST', `http://0.0.0.1`, true);
    xhr.responseType = 'blob';
    // 设置请求头（如果需要）
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.setRequestHeader('Authorization', 写token);

    // 定义请求完成时的回调函数
    xhr.onload = function () {
      if (xhr.status === 200) {
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(xhr.response, filename);
        } else {
          const link = document.createElement('a'); // 生成一个a元素
          let event = new MouseEvent('click'); // 创建一个单击事件
          link.download = filename;

          console.log('download', xhr.response);
          link.href = window.URL.createObjectURL(xhr.response); // 将生成的URL设置为a.href属性
          link.dispatchEvent(event); // 触发a的单击事件
          window.URL.revokeObjectURL(link.href);
        }
      }
    };

    // 定义错误处理函数
    xhr.onerror = function () {
      console.error('请求错误');
      setLoading(false);
    };

    // 定义请求进度处理函数（可选）
    xhr.onprogress = function (event) {
      if (event.lengthComputable) {
        setLoading(false);
        var percentComplete = (event.loaded / event.total) * 100;
        setProgressData(percentComplete, 0, 1);
        console.log('进度:', percentComplete + '%');
      }
    };

    // 发送请求，并传递请求体数据
    xhr.send(JSON.stringify(data));
    // 调用send（）函数，同时将数据以查询字符串的形式，提交给服务器
    xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')

GET

// 带两个参数的 URL 地址
    xhr.open('GET', `http://0.0.0.1?id=1&bookname=西游记`, true);
// 或调用send（）函数，同时将数据以查询字符串的形式，提交给服务器
    xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')

获取请求进度

   // 定义请求进度处理函数（可选）
    xhr.onprogress = function (event) {
      if (event.lengthComputable) {
        setLoading(false);
        var percentComplete = (event.loaded / event.total) * 100;
        setProgressData(percentComplete, 0, 1);
        console.log('进度:', percentComplete + '%');
      }
    };