javascript - JS异步操作没有执行，页面值接提交，断点无效

问题描述

问 题

按照lrh3321提供的办法改造了JSZip的压缩的执行过程，单独抽出来这个功能是没有任何问题的，但是在与表单融合的时候，就出现了莫名其妙的bug。代码如下：

/**
 * 确认按钮，开始提交数据
 */
$('#confirmBtn').on('click', async function() {
  //  获取到obj等模型文件，并压缩
  //  var formData = new FormData();
  // 获取checkbox
  let zip = new JSZip();
  var fileBox = $('#fileUploadInput');
  var fileList = fileBox[0].files;
  var objName = 'example';
  //  var flag = false;
  for (const fileObject of fileList) {
    //  获取obj文件的文件名
    if (fileObject.name.indexOf('.obj') !== -1) {
      var num = fileObject.name.indexOf('.obj');
      objName = fileObject.name.substring(0, num);
    }
    zip = await zipFileAsync(zip, fileObject);
  }
  sendFileAsync(zip, objName);
  // 关闭当前弹窗，弹出进度条
  $('#uploadModalTwo').modal('close');//  关闭当前model
  $('#uploadModalThree').modal(modalOptionsTwo).modal('open');
  console.log(zip);
  //  progressBar('Model/UploadModel', formData);
  return false;
});
/**
 * 异步压缩文件
 * @param zip file
 */
function zipFileAsync(zip, file) {
  const promise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function(e) {
      var result = reader.result;
      // 如果是图片文件，需要保存的时候把base64转为Blob二进制格式
      if (file.name.indexOf('.jpg' | '.png' | '.jpeg') !== -1) {
        result = convertBase64UrlToBlob(result);
      }
      console.log(zip);
      console.log(file.name);
      resolve(
        zip.file(file.name, result, {
          type: 'blob',
        }));
    };
  });
  return promise;
}
/**
 * 异步发送文件
 * @param zip file
 */
function sendFileAsync(zip, objName) {
  zip.generateAsync({
    type: 'blob',
    compression: 'DEFLATE', //  force a compression for this file
    compressionOptions: { //  使用压缩等级，1-9级，1级压缩比最低，9级压缩比最高
      level: 6,
    },
  }).then(function(content) {
    // see FileSaver.js
    console.log(content);
    var formData = new FormData();
    // JavaScript file-like 对象
    formData.append('Blobfile', content);
    console.log(formData);
    console.log(formData.get('Blobfile'));
    components.jszipSend('Model/UploadModel', formData);
    return false;
  });
}
/**
 * 将以base64的图片url数据转换为Blob
 * @param urlData
 * 用url方式表示的base64图片数据
 */
function convertBase64UrlToBlob(urlData) {
  var bytes = window.atob(urlData.split(',')[1]);
  //  处理异常,将ascii码小于0的转换为大于0
  var ab = new ArrayBuffer(bytes.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  return new Blob([ab], {type: 'image/jpg'});
}
//    ajax发送数据到后台
  jszipSend: function(url, data) {
    url = url.indexOf('http') > -1 ? url : config.API_ROOT + url;
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url);//  设置上传方式以及处理请求地址
    console.log('=====begin:======');
    xhr.send(data);
    console.log('=====send=====');
    return false;
  }

在执行过程中，可以下面的断点：

可以执行到如下步骤：但是调用栈中却没有前面的异步方法

再继续下去，就直接表单提交了。。。而且是提交到当前表单，后台接不到数据，为什么呢

解决方案

有前端页面的表单部分渲染后的 html源码吗？ #confirmBtn 不会是 HTMLButtonElement，并且type=submit吧。

这篇关于javascript - JS异步操作没有执行，页面值接提交，断点无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！