ajax断点不管用,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;

}

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

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

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