AJAX .done() 在实际响应成功之前返回

Question

我有以下代码等待 AJAX 请求完成/成功，然后它将重定向到不同的 url。

这是我的 AJAX 请求的样子

 function UploadFile(contoller, File, RecordID, AuxID) {
    console.log("initialize uploading file: " + RecordID);
    const formData = new FormData();
    formData.append('RecordID', RecordID);
    formData.append('AuxID', AuxID);
    formData.append('File', File);

    return $.ajax({
        type: "POST",
        url: contoller,
        processData: false,
        contentType: false,
        cache: false,
        enctype: 'multipart/form-data',
        data: formData,
        dataType: 'json'
    })
}

我有另一个函数，它调用 AJAX 请求并在响应成功时重定向到不同的 url（即：文件已成功上传到服务器）

    UploadFile(controller,
               file,
               ID
              ).done(
                    // redirects to different url
              ).fail(
                    console.log("file failed to upload")
              );


            

但是，我注意到 .done() 总是在文件完成上传到服务器之前执行。

如果我使用以下代码并“成功”，那么它运行良好。 success参数后面的回调函数只有在上传过程完成后才会被调用。

 $.ajax({
                    type: "POST",
                    url: controller,
                    processData: false,
                    contentType: false,
                    cache: false,
                    enctype: 'multipart/form-data',
                    data: formData,
                    success: () => {
                           // redirects to url
                        })
                    },
                    error: function (ret) {
                       
                    },
                    dataType: 'json'
                });

我在其他帖子/文档中读到，新的 jquery 将“success”替换为“.done()”，所以它们基本上是相同的，对吧？但是，我不确定为什么 .done() 不适用于我的代码。

Answer 1

done 和 failed 都需要传递给它们的回调函数。

$.ajax 返回一个 jqXHR 对象。该对象包含done和fail方法。从这个文档我们有：

deferred.done(doneCallbacks[,doneCallbacks])

地点：

doneCallbacks 类型：函数() 解决延迟问题时调用的函数或函数数组。

所以一个例子看起来像这样：

$.get( "test.php" ).done(function() {
   alert( "$.get succeeded" );
 });

Answer 2

在某些情况下，回调函数（传递给 .done()）可能会在服务器响应之前被调用（通常是当您快速连续发送相同的请求时）。 如果 jQuery 返回之前缓存的响应，就会发生这种情况。

只需添加cache:false参数即可：

$.ajax({
    type: "GET",
    cache: false,