Question

我对Promises很新，推迟了所有这些事情，我试图使用jQuery将我的旧习惯（回调地狱）改为Promise（我知道它不会尊重承诺A +，但这不是重点。

我现在所做的是两者兼而有之，我试图摆脱回调。我也使用TypeScript，但据我所知，它不应该相关。我只是公正地警告代码不是纯粹的JS。

// TODO I provide the "done" and "fail" callback here, but I'd like to use .done and .fail instead, but I want them to be executed AFTER the automatic response handling.
WidgetContext.getContext(
    function(data){
        console.log(data)
    },
    function(error){
        console.log(error)
    }
);

// In WidgetContext class, TODO here I want to get rid of the callbacks as well.
public static getContext(done: any, fail: any): JQueryPromise<WidgetContext> {
    return Payline.WebService.WidgetWSProxy.ajax(
        'context1.json',
        {
            userId: 123456
        },
        done,
        fail
    );
}

// In WidgetWSProxy class, TODO here again, there should not be any callback.
public static ajax(method: string = '', data: any = {}, done?: any, fail?: any, options: JQueryAjaxSettings = WidgetWSProxy._defaultOptions): JQueryPromise<WidgetWSProxy>{
    var url = WidgetWSProxy.buildUrl(WidgetWSProxy._url, method);

    return WidgetWSProxy._ajax(url, data, done, fail, WidgetWSProxy._processAjaxResponseData, WidgetWSProxy._logId + ' ' +  url, options);
}

// In AbstractHttpProxy class, TODO the only callback should be the responseHandler.
protected static _ajax(url: string, data: any, done?: any, fail?: any, responseHandler?: any, logId: string = AbstractHttpProxy._logId, options: JQueryAjaxSettings = AbstractHttpProxy._defaultOptions): JQueryPromise<AbstractHttpProxy>{
    // On log la requête.
    log.group(logId);
    log.time(logId);

    // Si aucun gestionnaire de réponse n'est correctement fourni, utilisation de celui par défaut.
    if(!_.isFunction(responseHandler)){
        responseHandler = AbstractHttpProxy._defaultResponseHandler;
    }

    // On injecte les data dans les options, on fait ainsi afin de cacher la logique jQuery pour ce paramètre particulier qui sera souvent utilisé.
    options = _.merge(options, {data: data});

    log.info('Requête HTTP envoyée: ' + JSON.stringify({
            url: url,
            options: options
        }));

    // On effectue l'appel ajax et on retourne une Promise jQuery.
    return $.ajax(url, options)
        // Succès
        .done(function(data){
            if(_.isFunction(done)){
                responseHandler(url, data, true, function(data){
                    // TODO HERE I execute the "done" callback inside the done() function, but I should not. I just need to call the responseHandler and update the data so the next call to ".done()" would use the updated data, even though I define it when I call the "WidgetContext.getContext()" method.
                    done(data);
                });
            }else{
                logMissingCallback(getCallerName());
            }
        })
        // Erreur (connexion interrompue, 404, 500, peu importe)
        .fail(function(error){
            if(_.isFunction(fail)){
                responseHandler(url, error, false, function(error){
                    // TODO Same stuff here, with the fail().
                    fail(error);
                });
            }else{
                logMissingCallback(getCallerName());
            }
        })
        // Sera toujours exécuté, peu importe ce qu'il se passe. (succès/erreur)
        .always(function(){
            log.timeEnd(logId);
            log.groupEnd();
        }
    );
}

我的目标是隐藏使用代理（WidgetWSProxy）背后的一些逻辑，自动记录所有请求并处理HTTP响应以根据需要格式化它们，然后使用.done延迟函数使用转换后的响应

它适用于此处，但如果我执行此类操作，则不会在.done调用中记录更新后的响应。

WidgetContext.getContext(
    function(data){
        console.log(data)
    },
    function(error){
        console.log(error)
    }
)
.done(function(data){
        console.log('init')
        console.log(data)
    });

当您多年使用它时，很难摆脱回想的思考方式......感谢您的帮助！

Answer 1

然后使用.done延迟函数使用转换后的响应。

即使您正在使用jQuery延迟，您应该习惯于始终只使用then，因为它实际上允许回调转换值 - 并为转换后的值返回可链接的承诺。 / p>

当你多年使用它时，很难摆脱回想的思考方式......

从代码中删除所有成功/错误回调。所有这些。
每个执行异步操作的函数，通常需要一个在最后调用一次的回调，应该返回一个promise。

那也包括你的responseHandler例如 - 他们需要返回promises，而不是接受回调，如果它们是异步的。你的代码将成为

WidgetContext.getContext().then(function(data){
    console.log(data)
}, function(error){
    console.log(error)
});

public static getContext(): JQueryPromise<WidgetContext> {
    return Payline.WebService.WidgetWSProxy.ajax(
        'context1.json',
        {
            userId: 123456
        }
    );
}

public static ajax(method: string = '', data: any = {}, options: JQueryAjaxSettings = WidgetWSProxy._defaultOptions): JQueryPromise<WidgetWSProxy>{
    var url = WidgetWSProxy.buildUrl(WidgetWSProxy._url, method);

    return WidgetWSProxy._ajax(url, data, WidgetWSProxy._processAjaxResponseData, WidgetWSProxy._logId + ' ' +  url, options);
}

protected static _ajax(url: string, data: any, responseHandler?: any, logId: string = AbstractHttpProxy._logId, options: JQueryAjaxSettings = AbstractHttpProxy._defaultOptions): JQueryPromise<AbstractHttpProxy>{
    if(!_.isFunction(responseHandler))
        responseHandler = AbstractHttpProxy._defaultResponseHandler;
    options = _.merge(options, {data: data});

    log.group(logId);
    log.time(logId);
    log.info('Requête HTTP envoyée: ' + JSON.stringify({
        url: url,
        options: options
    }));

    return $.ajax(url, options).then(function(data){
        return responseHandler(url, data, true);
    }, function(error){
        return responseHandler(url, error, false);
    }).always(function(){
        log.timeEnd(logId);
        log.groupEnd();
    });
}

使用jQuery.ajax延迟使用typescript和自动响应处理

1 个答案: