自定义 ajax 承诺函数签名

Question

我想基本上为 ajax done 和 fail 处理程序创建一个新的函数签名...鉴于下面的简化示例，我只是想附加 resource 作为要发送到的最后一个参数处理程序。

    const customAjax = function( url, resource ) {
        const p = $.ajax({
            converters: {
                'text script': function (text: string) {
                    return text;
                }
            },
            url: url + "?" + resource
        }).then(
            function () {
                [].push.apply(arguments, [resource]);
                return arguments;
            },
            function() {
                [].push.apply(arguments, [resource]);
                return arguments;
            }
        );

        return p;
    };

那么首选的用法是这样的：

customAjax( "url", "resourceKey" )
   .done( function( data, textStatus, jqXHR, resourceName ) { /* do something */ } )
   .fail( function( jqXHR, textStatus, errorThrown, resourceName ) { /* do something */ } );

问题是，在这两个处理程序中，只有一个参数。 javascript arguments 对象。所以，要访问我真正想要的每个参数，我必须这样做：

customAjax( "url", "resourceKey" )
   .done( function( args ) { 
      var data = args[ 0 ];
      var textStatus = args[ 1 ];
      var jqXHR = args[ 2 ];
      var resourceName = args[ 3 ];
      /* do something */
   } )
   .fail( function( args ) { 
      var jqXHR = args[ 0 ];
      var textStatus = args[ 1 ];
      var errorThrown = args[ 2 ];
      var resourceName = args[ 3 ];
      /* do something */ 
} );

有什么方法可以让它按照我喜欢的方式工作吗？

更新 - 不知道如何与结束我的问题的人沟通，但我不知道引用的“重复”问题如何回答/解决我的问题。

Answer 1

您需要覆盖$.ajax 返回的对象的fail 和done 方法属性，因此要确保最终传递给这两个方法的回调随后会使用额外的参数调用：

const customAjax = function( url, resource ) {
    const p = $.ajax({
        converters: {
            'text script': function (text: string) {
                return text;
            }
        },
        url: url + "?" + resource
    });
    let result = {
        ...p,
        done(f) {
            p.done(function (...args) {
                f.call(this, ...args, resource);
            });
            return result;
        },
        fail(f) {
            p.fail(function (...args) {
                f.call(this, ...args, resource);
            });
            return result;
        }
    };
    return result;
};

演示：

const customAjax = function( url, resource ) {
    const p = $.ajax({
        converters: {
            'text script': function (text) {
                return text;
            }
        },
        url: url + "?" + resource
    });
    let result = {
        ...p,
        done(f) {
            p.done(function (...args) {
                f.call(this, ...args, resource);
            });
            return result;
        },
        fail(f) {
            p.fail(function (...args) {
                f.call(this, ...args, resource);
            });
            return result;
        }
    };
    return result;
};


customAjax( "https://jsonplaceholder.typicode.com/todos/1", "resourceKey" )
    .done( function( data, textStatus, jqXHR, resourceName ) { 
        console.log( {data, textStatus, jqXHR, resourceName});
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>