Question

您如何return来自CORS请求的响应代码？我可以从onload事件中获取它，但我似乎无法将其取出并创建return以便我可以捕获它以进行值检查。

以下是基于http://www.html5rocks.com/en/tutorials/cors/的代码：

createCORSRequest: function(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {

      // Check if the XMLHttpRequest object has a "withCredentials" property.
      // "withCredentials" only exists on XMLHTTPRequest2 objects.
      xhr.open(method, url, true);

    } else if (typeof XDomainRequest != "undefined") {

      // Otherwise, check if XDomainRequest.
      // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
      xhr = new XDomainRequest();
      xhr.open(method, url);

    } else {

      // Otherwise, CORS is not supported by the browser.
      xhr = null;

    }
    return xhr;
  },

  makeCorsRequest: function() {
    // All HTML5 Rocks properties support CORS.
    var me = this;
    var url = 'http://google.com';
    var sCode = '';

    var xhr = me.createCORSRequest('GET', url);
    console.log('xhr', xhr);
    if (!xhr) {
      alert('CORS not supported');
      return;
    }

    // Response handlers.
    xhr.onload = function() {
      var text = xhr.responseText;
      var sCode = xhr.status;
      // var title = getTitle(text);
      // alert('Response from CORS request to ' + url + ': ' + xhr.status);
    };

    xhr.onreadystatechange = function() {
      console.log(this.status);
      sCode = this.status;
    }

    xhr.onerror = function() {
      alert('Woops, there was an error making the request.');
    };

    xhr.send();
    return sCode; // this returns an empty string or the initial value set to it and not from `onload` event
  }

Answer 1

一种方法可能是在JS中使用Callback，因为我们可以将JavaScript中的函数作为参数传递给其他函数，并从内部异步调用它们。

我稍微修改了你的代码以使其异步响应，并添加了相关的注释。请注意使用下面的callback。

//make few changes to make it asynchronous.
makeCorsRequest: function(callback) {
    // All HTML5 Rocks properties support CORS.
    var me = this;
    var url = 'http://google.com';
    var sCode = '';

    var xhr = me.createCORSRequest('GET', url);
    console.log('xhr', xhr);
    if (!xhr) {
      callback('CORS not supported');
      return;
    }

    // Response handlers.
    xhr.onload = function() {
      var text = xhr.responseText;
      var sCode = xhr.status;
      // var title = getTitle(text);
      // alert('Response from CORS request to ' + url + ': ' + xhr.status);
      callback(null, text);
    };

    xhr.onreadystatechange = function() {
      console.log(this.status);
      callback(this.status);
    }

    xhr.onerror = function() {
      callback('Woops, there was an error making the request.');
    };

    xhr.send();
  }

//this function would be the callback, it would be called 'Asynchronously' form XHR events with err or real data. First parameter generally indicates error.
function handleCorsResponse(err, data) {
   //check if error occurred
   if (err) {
      //error handling here
   }

  //if no error occurred, proceed.
   console.log(data);
}

//let's call `makeCorsRequest` with `handleCorsResponse` as a parameter.
$payments.makeCorsRequest(handleCorsResponse);

注意：更好的推荐方法是使用Promise。

获取CORS请求的状态代码

1 个答案: