ajax 发布请求在 iOS 上第三次后失败

Question

我有一个 Node.js express 应用程序。

在特定的视图中，我有一个经常性的 ajax post-call，它正在检查进程的状态。 在响应上，如果需要再次检查，则在再次检查之前有 5 秒的超时时间。

在桌面和移动设备上运行良好 none IOS 但是，一旦我在 iOS 手机上尝试它，它就在第三个请求中失败了。 （前两个效果很好）

我在 iPhone 上检查了不同的浏览器，每次都是一样的。

我收到以下电话回复

{"readyState": 0, "status":0, "statusText": "error"}

似乎每个 iOS 设备都是如此。但它在其他任何地方都有效（android、windows） 有什么想法可以从哪里来？ 非常奇怪的是，前两个调用运行良好，然后以某种方式被阻止。

请求的JS代码 ：

const checkUpdate =  (amount, ref, status) => {
        $.post({
            type: "POST",
            url: "/check-update-transaction",
            data: { amount, ref, status},
            headers: {
                "CSRF-Token": token,
            },
        }).done(
            (res) => {
                console.log(JSON.stringify(res));
                setTimeout(() => {
                    switch (parseInt(res.status))   {

                        case 1:
                            
                            return checkUpdate(amount, ref, 1);
                        case 2:
                            
                            return checkUpdate(amount, ref, 2);
                        case 3:
                            
                            $("#circle-loader-popup").hide();
                            return true;
                            
                    }

                }, 5000);

            }
        ).fail((error) => {
            $(".status-information .main-content-loader")
                .html(`A problem happened during the submission please try again `);
            console.log(JSON.stringify(error));
            if(error.responseJSON && error.responseJSON.notFind === true){
                $("#after-first-step").hide();
            }
        });
    };

提前致谢，

安塞尔

Answer 1

由于似乎有些混乱，请阅读您的 cmets 到您的问题，我认为用这个答案消除混乱会很方便。

你的问题的问题是，这个响应与ajax请求无关：

{"readyState": 0, "status":0, "statusText": "error"}

您在这里看到readyState，巧合的是，它也是XMLHTTPRequest 对象的一个​​属性。

那么，jQuery post 方法是如何工作的，XMLHTTPRequest 是从哪里来的？

嗯，jQuery 有自己的XMLHTTPRequest 对象实现：jQuery XHR 对象或jqXHR。这是同一个对象，但具有一些附加功能。它具有类似 Promise 的功能。

post 方法实际上返回一个jqXHR 对象：

var thejqXHR = $.post(url);
console.log(thejqXHR.readyState); //1

这里的readyState 是1：open() has been called.，因为post 立即在jqXHR 对象上调用open。换句话说：它永远不会是0，因为它是立即打开的。

由于jqXHR 对象的作用类似于承诺，因此我们可以执行done。

var thejqXHR = $.post(url);
thejqXHR.done(function(data, textStatus, jqXHR){
    console.log(data); //the data returned by the server
    console.log(textStatus); // always 'success'
    console.log(jqXHR.readyState);// always 4
});

成功时调用jqXHR 对象的done 方法。含义请求成功：url有效，请求到达服务器，服务器发送有效响应，其中data传递给done方法。而XHR.readySate 是 4：The operation is complete.

如果出现问题，则不会调用 done 方法。承诺被拒绝，所以fail 方法被调用。

thejqXHR.fail(function(jqXHR, textStatus, errorThrown){
    console.log(jqXHR.readyState); // always '4'
    console.log(textStatus); // always 'error'
    console.log(errorThrown); // for example 'Not Found'
});

在这里，您再次看到readyState 是4：The operation is complete，请求已发送，但由于某种原因它没有解析，调用fail 方法并且操作完成（但是有错误）。 errorThrown 是您需要调查以找出我们的问题所在。

总结一下：XHR.readyState 在使用 jQuery 的 post 方法时毫无用处。请求刚开始时为1 (opened)，或者请求完成时为“4”（成功或失败）。

所以，回到你的行：

{"readyState": 0, "status":0, "statusText": "error"}

这与XMLHTTPRequest.readyState 无关。当请求完成时，XMLHTTPRequest.readyState 是 4。您在这里处理的是来自服务器的成功响应。服务器发回并传递给成功（done）函数的是data。换句话说，请求进行得很顺利。找到服务器的地址，服务器返回一个有效的响应并传回给你。

现在，我不知道为什么服务器会成功响应上述行。这完全取决于生成此行的服务器端代码。您在问题中发布的代码与它无关。您应该调查的是服务器端代码，并找出为什么它会返回带有readyState: 0 的字符串。

希望现在清楚一点...