使用ES6处理异步请求

时间:2016-12-06 11:55:22

标签: javascript ajax asynchronous ecmascript-6

我尝试异步发送多个请求,但只有一个请求已完成 - 所有剩余的请求一直有xmlhttp.status == 0xmlhttp.readyState == 1,每次都有四次。

出了什么问题?

我有两个文件,Api.jsAjax.js。 Api使用Ajax发送请求:

Api.js

import Ajax from './Ajax';

class Api {

    returnData (success, failure) {
        var params = {
            methodId: this.ids.returnData,
            requestBody: {}
        };
        this.sendRequest(params, success, failure);
    };

    sendRequest (data, success, failure) {
        Ajax.execute(function (response) {
            success(response); // simplified
        });
    };

}

export default new Api();

Ajax.js

class Ajax {

    createXmlHttp () {
        if (window.XMLHttpRequest) {
            this.xmlhttp = new XMLHttpRequest();
        } else {
            this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    };

    onreadystatechange (action, data) {
        this.xmlhttp.onreadystatechange = function () {
            if (this.xmlhttp.readyState === 4) {
                if (this.xmlhttp.status === 200) {
                    action(this.xmlhttp.responseText);
                }
            }
        }.bind(this);
    };

    execute (action, url, data) {
        this.createXmlHttp();
        this.onreadystatechange(action, data);
        this.xmlhttp.open("POST", url, true);
        this.xmlhttp.setRequestHeader("Content-Type", "text/plain");
        this.xmlhttp.send(data);
    };

};

export default new Ajax();

1 个答案:

答案 0 :(得分:4)

您只创建了一个Ajax对象实例。

每次拨打Ajax.execute时,都会覆盖this.xmlhttp = new XMLHttpRequest();

每个请求都需要Ajax的新实例。

export default new Ajax();

不要在那里创建实例:

export default Ajax;

...在需要新对象时创建它。

sendRequest (data, success, failure) {
    new Ajax.execute(function (response) {