如何将参数传递给ajax函数的回调

I'm making ajax calls to an API server. I'm making a specific call to /getobjectdetails/ from multiple places in my code, so I thought I'd try to make it a bit cleaner, but this is the first time I've delved into callbacks like this. Here is the code I attempted:

我正在向API服务器发出ajax调用。我正在从代码中的多个位置对/getobjectdetails/进行特定的调用，所以我想尽量使它更简洁一些，但这是我第一次深入到这样的回调。下面是我尝试的代码:

let api = (function () {
    return {
        getObjectDetails(id, successCallback, errorCallback) {
            $.ajax({
                type: 'GET',
                url: app.apiServerRoot + '/api/getobjectdetails/?Id=' + id,
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("Authorization", "Bearer " + user.authToken);
                },
                success: successCallback(data,s,xhrdata),
                error: errorCallback(e)
            });
        }
    }
})();

But when I call this as a test:

但是当我把这个叫做测试

api.getObjectDetails(1008,function(data,s,x){console.log(data)},function(e){console.log(e)})

I get the following error:

我得到以下错误:

Uncaught ReferenceError: data is not defined
    at Object.getObjectDetails (api.js:13)
    at <anonymous>:1:5

What am I doing wrong?

我做错了什么?

3 个解决方案

#1

Change your ajax success parameter to:

将ajax成功参数更改为:

{
    ...,
    success: successCallback,
    error: errorCallback
}

The way you were doing previously was executing the function directly. You want to pass the reference of the function and not execute it.

之前的方法是直接执行函数。您希望传递函数的引用，而不是执行它。

For example when you bind a click event, you want to pass the reference:

例如，当您绑定单击事件时，您希望传递引用:

button.addEventListener('click', myCallback);

And not

而不是

button.addEventListener('click', myCallback());

#2

As the error points out, when you call successCallback, data isn't defined.

正如错误所指出的，当您调用成功调用时，没有定义数据。

Try this:

试试这个:

let api = (function () {
    return {
        getObjectDetails(id, successCallback, errorCallback) {
            $.ajax({
                type: 'GET',
                url: app.apiServerRoot + '/api/getobjectdetails/?Id=' + id,
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("Authorization", "Bearer " + user.authToken);
                },
                success: (data, s, xhrdata) => successCallback(data,s,xhrdata),
                error: (e) => errorCallback(e)
            });
        }
    }
})();

There isn't much difference between the arrow function notation and function declaration.

箭头函数表示法和函数声明之间没有太大的区别。

You could write either of these:

你可以这样写:

success: (data, s, xhrdata) => successCallback(data, s, xhrdata)

success: (data, s, xhrdata) => { 
    successCallback(data, s, xhrdata); 
}

success: function(data, s, xhrdata) {
    successCallback(data, s, xhrdata);
}

#3

You need to pass success and error a function. You shouldn't call that function yourself.

您需要传递一个函数的成功和错误。你不应该自己调用那个函数。

When you put the parenthesis after the name of the function, it invokes it immediately. So instead of what you wrote, it should be :

当您将括号放在函数名之后时，它会立即调用它。所以，它应该是:

let api = (function () {
return {
    getObjectDetails(id, successCallback, errorCallback) {
        $.ajax({
            type: 'GET',
            url: app.apiServerRoot + '/api/getobjectdetails/?Id=' + id,
            beforeSend: function(xhr) {
                xhr.setRequestHeader("Authorization", "Bearer " + user.authToken);
            },
            success: function(data, s, xhrdata) {
                successCallback(data,s,xhrdata);
            },
            error: function(e) {
                errorCallback(e);
            }
        });
    }
}
})();

#1