若依-$.modal.loading("正在导出数据，请稍后..

实现需求

我在写一个上传附件的js程序，由于上传的文件可能会比较大，所以上传之后可能会出现较长时间的等待，为了避免误导消费者，这里决定，上传附件期间，搞个弹出层，让用户知道当前系统的状态是处理中。

官方文档

提供遮罩层信息

$.modal.loading("正在导出数据，请稍后...");
$.modal.closeLoading();

实现

根据官方提供的接口，我的ajax的提交向后端的代码如下：

const formData = new FormData();
      formData.append("docUrl", document.getElementById("doc").files[0]);
      formData.append("articleRegion", $("input[name='articleRegion']:checked").val());
      formData.append("available", $("input[name='available']:checked").val());
      formData.append("pdfFlag", 1);
      formData.append("categoryId", $("input[name='categoryId']").val());
      formData.append("articleModel", $("input[name='articleModel']:checked").val());
      formData.append("title", $("input[name='title']").val());
      formData.append("isCopy", $("input[name='isCopy']").val());
      formData.append("copyFlag", $("input[name='copyFlag']").val());
      formData.append("keywords", $("input[name='keywords']").val());
      formData.append("coverImage", $("input[name='coverImage']").val());
      formData.append("tags", tagIds);
      formData.append("commentFlag", $("input[name='commentFlag']").val());
      formData.append("description", $("#description").val());
      $.ajax({
        cache: true,
        type: "POST",
        dataType: "json",
        url: ctx + "cms/document/add",
        data: formData,
        async: false,
        processData: false,     //用于对data参数进行序列化处理 这里必须false
        contentType: false,     //必须
        beforeSend: function () {
          $.modal.loading("数据上传中，请稍后...");
        },
        error: function (request) {
          $.modal.alertError("系统错误");
        },
        success: function (data) {
          $.operate.successCallback(data);
        }
      });

我的想法是，当调用这段代码，ajax提交之后，弹出浮框，提示：数据上传中；当时当程序运行之后，效果并没有达到，看现象，当ajax整个程序执行完成之后，浮框会一闪而过，也就是说，弹出浮框的程序没有问题，但是他出现的时机有问题。

修正

通过查看源码，发现官方提供的这个弹出浮框的程序，底层调用的方法是blockUI，从名称上也可以知道，这个方法是阻塞的，这样的话，就想到ajax这个方法配置的同步/异步会不会对相关产生影响，于是将这个参数asyn设置成true，也就是让ajax异步的方式调用，再看效果，发现效果实现了。
修改之后的代码如下：

const formData = new FormData();
      formData.append("docUrl", document.getElementById("doc").files[0]);
      formData.append("articleRegion", $("input[name='articleRegion']:checked").val());
      formData.append("available", $("input[name='available']:checked").val());
      formData.append("pdfFlag", 1);
      formData.append("categoryId", $("input[name='categoryId']").val());
      formData.append("articleModel", $("input[name='articleModel']:checked").val());
      formData.append("title", $("input[name='title']").val());
      formData.append("isCopy", $("input[name='isCopy']").val());
      formData.append("copyFlag", $("input[name='copyFlag']").val());
      formData.append("keywords", $("input[name='keywords']").val());
      formData.append("coverImage", $("input[name='coverImage']").val());
      formData.append("tags", tagIds);
      formData.append("commentFlag", $("input[name='commentFlag']").val());
      formData.append("description", $("#description").val());
      $.ajax({
        cache: true,
        type: "POST",
        dataType: "json",
        url: ctx + "cms/document/add",
        data: formData,
        async: true,
        processData: false,     //用于对data参数进行序列化处理 这里必须false
        contentType: false,     //必须
        beforeSend: function () {
          $.modal.loading("数据上传中，请稍后...");
        },
        error: function (request) {
          $.modal.alertError("系统错误");
        },
        success: function (data) {
          $.operate.successCallback(data);
        }
      });