在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: callback is not a function”

我一整天都在为此苦苦挣扎，但由于我对 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
}

这应该够了吧。

Answer 2

你在哪里调用函数getListData ？

我的猜测是，您可以像getListData()一样调用它而不传递回调函数。 如果你像getListData(callback)一样调用它，它应该可以工作。 如果没有完整的代码示例，很难说会发生什么。

只是为了测试你也可以改变线

function getListData(callback) {

至

function getListData() {

只是为了看看它是否有效。

在第二个 szenario 中，您没有传递回调，因此当您调用callback函数时，Javascript 将在父作用域中查找它。