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），问题完美解决。