javascript - 前端 JavaScript 模式忽略先前的请求响应

Question

我不是一个前端开发人员 - 用户可能会单击提交按钮来提交 AJAX 请求(这是一个 SPA)，如果用户想尝试，可能会在几秒钟后再次单击该按钮不同的设置。我可以添加一个覆盖层并阻止他们提交，直到响应返回。但是假设我不想使用覆盖方法 - 是否可以使用某种编程模式(可能是闭包？)来忽略除最近请求的响应之外的所有响应？

以下是一些代码示例:

define([

        '+appState',
        '#allModels',
        '#allCollections',
        'form2js',
        'ejs',
        'underscore',
        'react',
        '#allFluxActions'
    ],

    function (appState, models, collections, form2js, EJS, _, React, allFluxActions) {

        var actions = allFluxActions['FileAction'];

        var UploadFileView = React.createClass({


            handleSubmit: function (e) {

                e.preventDefault();

                this.props.clearUploadResult();

                var data = new FormData();
                data.append('file-0', this.state.file);


                if (!this.props.mappingType) {
                    alert('undefined mapping type.');
                    return;
                }
                else {
                    console.log('mapping type selected:', this.props.mappingType);
                }

                this.props.setStatus('PENDING');

                const self = this;

                return $.ajax({

                    type: 'POST',
                    url: 'http://172.x0.x.x1:4000/upload',
                    data: data,
                    headers: {
                        'x-baymax-mapping-type': this.props.mappingType
                    },
                    cache: false,
                    contentType: false,
                    processData: false

                }).done(function (resp) {
                    console.log(resp);
                    if (resp && resp.responseJSON && resp.responseJSON.success) {
                        self.props.setUploadResult('No upload errors, all clear.');
                    }
                    else if (resp && resp.responseJSON && resp.responseJSON.error) {
                        self.props.setUploadResult(resp.responseJSON.error);
                    }
                    else {
                        self.props.setUploadResult(resp);
                    }

                }).fail(function (resp) {
                    if (resp && resp.responseJSON && resp.responseJSON.error) {
                        self.props.setUploadResult(resp.responseJSON.error);
                    }
                    else {
                        self.props.setUploadResult('Fail - unexpected server error.');
                    }
                });

            },

            handleImageChange: function (e) {
                e.preventDefault();

                this.props.clearUploadResult();

                var reader = new FileReader();
                var file = e.target.files[0];
                var fileName = document.getElementById('fileName');
                fileName.innerHTML = file.name;
                console.log('File Data:', file);

                reader.onloadend = () => {
                    this.setState({
                        file: file
                    });
                };

                reader.readAsDataURL(file);
            },

            render: function () {

                return (
                    <div className='row fileUploadForm'>
                        <form onSubmit={this.handleSubmit}>
                            <div className='nine columns'>
                                <label className='fileUpload'>File Upload
                                    <input type='file' name='file' id='fileUpload' onChange={this.handleImageChange}/>
                                </label>
                                <span id='fileName'></span>
                                <div id="upload-submit-button-div" className="upload-submit-button-div">
                                    <button className='button-primary fileFormSubmit' type='submit'
                                            onClick={this.handleSubmit} value='Submit'>Submit
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                )
            }

        });


        return UploadFileView;

    });

当用户单击提交(选择文件后)时，响应可能需要 5-10 秒。在最后的响应返回之前，我们的测试工程师会变得不耐烦并尝试一些其他文件。单击提交按钮后如何忽略以前的响应？我正在考虑使用闭包的某种时间戳技巧，但我不确定。有点难住了。

Answer 1

您可以存储 $.ajax 请求，然后在发送下一个请求之前 abort() 它。

...
let lastAjax = null;
...
var UploadFileView = React.createClass({
  handleSubmit: function (e) {
    ...  
    if (!!lastAjax) {
      lastAjax.abort();
    }

    lastAjax = $.ajax({
      ...
    });

    return lastAjax;
  },
  ...
})