ajax.POST請求偶爾被瀏覽器截停，后台接收不到請求，Status返回（canceled）的原因。

 

 

出錯環境前端用的是vue+layui+jquery，使用post請求做更新操作時時不時出現后台接收不到請求的情況。

瀏覽器報錯截圖

前端代碼（只是請求部分vue methods部分）

                methods: {
                    updateTimer: function() {
                        $.ajax({
                            type: "POST",
                            url: "http://127.0.0.1:8080/api/v1/timer/update",
                            contentType: "application/json",
                            data: JSON.stringify(this.timer),
                            // async: false , //改為同步
                            success: function(response) {
                                console.log(response);
                                if (response.resultCode == '20000') {
                                    layer.msg("更新成功!");
                                    window.parent.location.reload(); //刷新父頁面
                                    var index = parent.layer.getFrameIndex(window.name); //獲取窗口索引
                                    parent.layer.close(index); // 關閉layer
                                } else {
                                    // 失敗了
                                    layer.msg('添加失敗!')
                                }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                alert("error!");
                                console.log(jqXHR);
                                console.log(textStatus);
                                console.log(errorThrown);
                            }
                        });
                    }
                }

原因分析：

因為並不是發送的所有請求后台都接收不到，只是偶爾現象，又由於ajax默認是異步提交，所以推測有可能是頁面中js加載順序的過導致請求被取消。

解決辦法：

將ajax的異步改為同步（async: false），問題完美解決。