javascript - 尝试从 jQuery.get() 返回值，总是以未定义结束

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 7 年前。

现在我正在使用 jQuery/Javascript 进行表单验证，并且我有一个输入，用户可以在其中输入 URL。我做了一个名为 urlError 的函数检查 URL 是否存在，如下所示:

var urlErrorExist = urlError("some_url");

function urlError(url) {

  $.ajaxPrefilter( function (options) {
    if (options.crossDomain && jQuery.support.cors) {
      var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
      options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
      //options.url = "http://cors.corsproxy.io/url=" + options.url;
    }
  });

  var error;

  $.get(url, function() { 
    error = false;
  }).fail(function() {
    error = "URL is invalid";
  });
  return error;
}

我的逻辑是，如果 URL 存在，我设置变量 error为 false，如果有错误，则将错误设置为字符串 URL is invalid 。最后我返回了error的值，这样我就可以测试一下是否有错误，如果有则显示"URL is invalid"字符串到页面。然而，error当我将变量记录到控制台时，它总是以未定义的形式结束。我尝试使用警报来查看 $.get 是否实际上是这样工作的:

  $.get(url, function() { 
    alert("URL is valid");
  }).fail(function() {
    alert("URL is invalid");
  });
}

对于无效和有效的 URL，它都按预期工作。我哪里出错了？

Answer 1

您的函数在请求得到满足之前就返回了，因此返回会发送未定义的消息，因为其中不存在任何值。要测试它，请尝试在错误变量中添加默认值。

为什么？

由于它是异步 http 调用，服务器可能需要一些时间来响应，但由于您从成功和错误回调外部返回，因此返回发生在您的调用(GET)执行之前，因此没有为其设置任何值，因此它的那里有一个未定义的值。

尝试为您的错误设置默认值以了解更多信息。

var error = "blah";

  $.get(url, function() { 
    error = false;
  }).fail(function() {
    error = "URL is invalid";
  });
  return error;

更好的方法

在这里，每个函数都执行自己的任务并且更具可读性。

function doAjax(url, successCallback, failureCallback) {

    $.get(url, function() { 
        error = false;
        successCallback(error);
      }).fail(function() {
        error = "URL is invalid";
        failureCallback(error);
      });

}

function successCallback(errorString){
  //do something here, but be happy as it executed well :D
}

function errorCallback (errorString) {
 //do something here, be sad because it didn't
}

doAjax("http://google.com",successCallback, errorCallback);