javascript - 在 vanilla JS ajax 中将回调函数作为参数传递

Question

我正在开发一个 ajax 函数来从数据库中检索信息。我设置了 API，并且 ajax 函数确实检索了正确的值，但我作为参数传递的回调函数在 onreadystatechange 上不起作用。

下面的简化代码

function serializeArgs(args) {
  //Serialize Arguments
}
function callback(a) {  //The function to be called as callback
  //Process the response and add contents to the page
}

function getListData(callback) {
  var ajaxOptions = {
    action: "get_data",
  }
  var request = new XMLHttpRequest();
  request.open("POST", apiurl, true);
  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
  request.setRequestHeader("Accept-language", "en-US");
  request.onreadystatechange = function(event) {
    if (this.readyState == 4 && this.status == 200) {
      callback(this.response);
    }
  };
  request.send(serializeArgs(ajaxOptions));
}

当我运行该函数时，收到错误“TypeError:回调不是函数”

我一整天都在努力解决这个问题，但由于我对ajax没有那么丰富的经验，我无法弄清楚为什么会发生这种情况，以及如何解决它。我有预感，这与 ajax 的异步性质有关，但我不确定如何解决这个问题。

Answer 1

此错误的简短引用:

发生以下情况时，您通常会收到此错误:

• 当对其属性进行函数调用时，该属性根本就不是函数。
• 当对不包含该函数或方法的对象类型进行函数调用时。
• 当对内置方法进行函数调用时，需要提供回调函数参数，但不存在此类函数。

我在你的ajax函数中注意到以下内容:

您的参数名为callback，就像您的函数callback一样。你的ajax函数试图做的是将参数callback用作函数(不确定你是否将函数callback作为参数传递，如果你这样做，那么它就是好吧，但由于我看不到您在哪里调用 getListData 函数，所以我只能猜测您在调用它时没有将函数 callback 作为参数传递)。

//Your function callback is trying to access this parameter.
//So unless your actual function callback is being passed in as an argument,
//it's most likely trying to access your parameter even though it is NOT a function or it isn't even receiving a function as parameter
function getListData(callback)
function callback(a)

但是，如果您尝试简单地将其作为函数(而不是回调)访问，我建议更改参数名称或函数名称callback。

举个例子:

实现您想要实现的目标的第一种方式(回调方式)。这样调用你的函数:

getListData(callback)

或者执行以下操作:

function getListData(changedParamName) {
   //this way you can now call your callback function and pass this.response to it
}

这应该可以解决问题。