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

【问题标题】：How to pass parameters to callback from ajax function如何将参数传递给ajax函数的回调
【发布时间】：2017-11-08 20:11:34
【问题描述】：

我正在对 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)
            });
        }
    }
})();

但是当我称之为测试时：

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

我收到以下错误：

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

我做错了什么？

【问题讨论】：

标签： javascript jquery ajax callback

【解决方案1】：

将您的 ajax 成功参数更改为：

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

你之前的做法是直接执行函数。你想传递函数的引用而不是执行它。

例如当你绑定一个点击事件时，你想传递引用：

button.addEventListener('click', myCallback);

不是

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

【讨论】：

效果很好，而且作为奖励，这很有意义！ :)
@RatherNotsay :)

【解决方案2】：

正如错误所指出的，当您调用successCallback 时，数据未定义。

试试这个：

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)
            });
        }
    }
})();

箭头函数符号和函数声明没有太大区别。

你可以写以下任何一种：

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】：

您需要传递success 和error 一个函数。你不应该自己调用那个函数。

当你在函数名后面加上括号时，它会立即调用它。所以不是你写的，应该是：

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);
            }
        });
    }
}
})();

【讨论】：