时间戳

首页 > 解决方案 > 自定义 ajax 承诺函数签名

javascript - 自定义 ajax 承诺函数签名

问题描述

我想基本上为 ajaxdone和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 */ } );

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

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 */ 
} );

有没有办法让它按照我喜欢的方式工作？

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

标签： javascriptajaxes6-promise

解决方案

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

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>

推荐阅读