ajax请求接口导致status为canceled的解决方法

如图所示：

今天在对接口的时候，发现请求变红，status显示为cancel，刚开始觉得是请求超时，然后经过调试后发现，请求的参数能进后台接口，但是前台拿不到返回的信息。
场景复现：

FilterForm.js

import React from 'react';
import { Form,Input, Button,DatePicker} from 'antd';
import { inject, observer } from 'mobx-react';
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
@inject('nursingRecordStore')
@observer
class FilterForm extends React.Component {
  constructor(props) {
    super(props);
    this.store = this.props.nursingRecordStore;
  }
  handleSubmit = () => {
    this.props.form.validateFields((err, fieldsValue) => {
      if (!err) {
        const rangeTimeValue = fieldsValue['time'];
        const values = {
        ...fieldsValue,
        'time': [
          rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
          rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
        ]
      };
       console.log(values.time[0])
       this.store.getNursingRecord(values.name,values.time[0],values.time[1],1,10,1);
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const rangeConfig = {
      rules: [{ type: 'array', required: true, message: 'Please select time!' }],
    }
    return (
      <Form
        style={{ marginLeft: 0 }}
        layout="inline"
        onSubmit={this.handleSubmit}
      >
        <FormItem label="老人名称:">
          {getFieldDecorator('name', {
            rules: [
              // { required: true, message: 'Please input your name!' }
            ]
          })(
            <span>< Input placeholder="请输入" /></span>
          )}
        </FormItem>
        <Form.Item label="起止时间：">
          {getFieldDecorator('time', rangeConfig)(
            <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />,
          )}
        </Form.Item>
        <Form.Item>
          <Button
            className="btnsearch"
            type="primary"
            htmlType="submit"
          >
            搜索
        </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default Form.create()(FilterForm);

//接口请求函数

//查询护理记录
export function getNursingRecord(name,startDate,endDate,page,size,id) {
  return ajax({
    url: `/nurseManage/NurseRecords?name=${name}&startDate=${startDate}&endDate=${endDate}&page=${page}&size=${size}&id=${id}`,
    method: 'get',
  });
}

在百度一圈之后终于发现了原因，我的请求实在form表单提交的,越来是由于在提交时，form action与绑定于button上的click事件会同时触发。form action将表单内容以serach的形式追加至当前url上，url变更后会导致页面重新加载， 而这正是导致get请求在执行后就被终止的原因。
后来我在提交按钮的方法里加了阻止表单默认提交——e.preventDefault();

handleSubmit = (e) => {
    //阻止表单默认提交
    e.preventDefault();
    this.props.form.validateFields((err, fieldsValue) => {
      if (!err) {
        const rangeTimeValue = fieldsValue['time'];
        const values = {
        ...fieldsValue,
        'time': [
          rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
          rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
        ]
      };
       console.log(values.time[0])
       this.store.getNursingRecord(values.name,values.time[0],values.time[1],1,10,1);
      }
    });
  }

问题就解决了