ajax请求status为canceled：记录一次bug排查

项目背景

项目是一个 react+antd 的管理后台

bug描述

当选择青岛银行的时候，点击查询后，页面刷新了，查询条件又变成默认的压测环境了。但是此后又都是正常的：

也就是说只有第一次进入页面的时候才出现这个问题，很玄门。经过 debugger 多番排查，后来终于定位到是请求的问题了，请求的话当然去 network 里面瞅瞅了

发现首次进入，当这个点击查询后发起的请求根本没有成功，status 为 canceled 状态，强烈建议 chrome 中将 Preserve log 这个选项勾上

这样当页面刷新时之前的请求还保留着。之前就是没有勾上，害的我定位问题花了好长时间。

bug原因

定位到问题了，就好精确搜索了，直接 google 搜“请求 status 为 canceled ”。也就是说请求 canceled 之后，浏览器重新刷新了页面。那为什么状态会是 canceled 呢？浏览器为什么取消了请求呢？答案相信大家都已经猜到了，问题就处在 form 表单里了。原来我使用了的是 button 进行提交了表单，form action 事件与绑定与 button（或者 type 为 submit 的 input 元素）按钮上的 click 事件同时触发，form action 将表单内容以参数的形式追加到了 url 的末尾，而 url 的变化导致浏览器的刷新，后面再次请求时 url 没有变。所以，只有第一次进如页面才会有这个问题。

bug解决

知道了原因，解决就很方便了，直接阻止默认行为就可以了

e.preventDefault();

其实，在 jQyery 的时代，那时候很容易想到要阻止默认行为的，现在用 antd 封装好的 Form 和 Button 组件倒是容易忘掉。虽然不是什么重大的发现，但还是记录一下自己的学习过程。