构造函数模式多次调用会覆盖之前的如何解决?

Question

问题描述

原问题: es6的promise无法多次执行reslove如何解决?
现问题: 构造函数模式多次调用会覆盖之前的如何解决?

问题出现的环境背景及自己尝试过哪些方法

原描述:
我封装了一个ajax的方法并使用了promise, 但是当一个页面第二次调用这个ajax方法的时候无法执行resolve.
我尝试搜索得知promise的状态只能改变一次, 但是我在每次执行方法的时候都会新建一个promise.
我觉得有可能与我的设计模式有关, 如果再不改变设计模式的前提下, 要如何解决?
现描述:
我封装了一个ajax的方法, 使用的是构造函数模式?
但是当多次页面调用时, 会导致前面进行的ajax方法被覆盖掉.
如何修改最少的代码, 才能多次同时调用改ajax方法.

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

var my = function() {
    // beforeAjax, ajax, afterAjax 均为简略缩写且为异步
    
     * @param  {string}   url      [description]
     * @param  {object}   data     [上传携带的参数]
     * @param  {Function} callback [回调函数]
     * @param  {object}   setting  [ajax请求时的一些设置]
    this.ajax = function(url, data, callback, setting) {
    
        // beforeAjax, ajax, afterAjax 均为简略缩写且为异步
        new Promise((resolve, reject) => {
            beforeAjax(() => {
                resolve(0);
            });
        }).then(number => {
            return new Promise(resolve, reject) {
                ajax(() => {
                    resolve();
                });
            }
        }).then(() => {
            afterAjax(() => {
                console.log(url);
                callback();
            })
        });
    }
    return this;
}
window.$my = new my();

预期结果

调用时, $my.ajax(url, data, callback, setting);
假如传入的url依次为a.com, b.com, c.com;
打印出来是 c.com, c.com, c.com

Answer 1

this.ajax 本身不return，外面无法挂载then
promise是第一个then执行完,执行第二个then,你第二个里面不返回值，外面挂载也读不到值

Answer 2

感觉没啥问题，检查是否其他代码有问题（导致无法resolve）

---

var my= function(){
    return this
}
my.prototype.ajax= function(url, data, callback, setting) {
    
        // beforeAjax, ajax, afterAjax 均为简略缩写且为异步
        new Promise((resolve, reject) => {
            beforeAjax(() => {
                resolve(0);
            });
        }).then(number => {
            return new Promise(resolve, reject) {
                ajax(() => {
                    resolve();
                });
            }
        }).then(() => {
            afterAjax(() => {
                console.log(url);
                callback();
            })
        });
    }
    window.$my = new my();

你大概是想要这种效果？

---

可以用class实现，可读性更好些

class My{
    ajax(url, data, callback, setting) {
    
        // beforeAjax, ajax, afterAjax 均为简略缩写且为异步
        new Promise((resolve, reject) => {
            beforeAjax(() => {
                resolve(0);
            });
        }).then(number => {
            return new Promise(resolve, reject) {
                ajax(() => {
                    resolve();
                });
            }
        }).then(() => {
            afterAjax(() => {
                console.log(url);
                callback();
            })
        });
    }
}
window.$my = new My();