一个基本的香草 javascript AJAX 装载机

Question

我正在尝试编写一个简单的 function 从 ajax 调用返回数据。 这是我所拥有的

var mytext = "";

function load(url){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send();
    xhr.onloadend = function(e){
        return xhr.responseText;
    }
}

var mytext = load('window.html');

console.log(mytext);

我被卡住了，如何获得返回值？ 我是 function 中的 function，我迷路了:(

Answer 1

有几种方法可以做到这一点。 由于您似乎是 javascript 的新手，您可以从callback开始：

 function load(url, callback){ var xhr = new XMLHttpRequest(); xhr.onloadend = function(e){ callback(xhr); }; xhr.open('GET', url); xhr.send(); } load('/', function (data) { console.log(data); });

在此示例中， callback是 function，我们在调用时将xhr作为参数传递给该 function。

Answer 2

我的建议是使用Promise并fetch API。

function ajax(options) {
  return new Promise(function (resolve, reject) {
    fetch(options.url, {
      method: options.method,
      headers: options.headers,
      body: options.body
    }).then(function (response) {
      response.json().then(function (json) {
        resolve(json);
      }).catch(err => reject(err));
    }).catch(err => reject(err));
  });
}

你可以像这样使用它：

  const ajaxResponse = await ajax({url: '/some/api/call', method: 'get'});

如果您还不知道， await只能在async函数中使用。 如果您不想使用async函数，请执行以下操作：

ajax({url: '/some/api/call', method: 'get'}).then(data => {
  // process data here
});

解释：

JavaScript 是一种单线程语言。 这意味着一切都以阻塞方式运行。 如果您的 Ajax 调用需要 3 秒，那么 JavaScript 将暂停 3 秒。 幸运的是， XMLHttpRequest和fetch API 通过使用异步函数解决了这个问题，这意味着代码可以在 Ajax 调用等待响应时继续运行。

在您的代码中，您没有收到来自 function 的响应，因为 Ajax 调用不会停止执行，这意味着在进行调用时，还没有什么可以返回，到调用完成时，函数的调用也是很久以前的事了。 您可以告诉 JavaScript 但是通过Promise跟踪此异步任务。 当您的任务完成后，将使用来自 Ajax 调用的数据调用Promise then function 。

JavaScript 还提供语法糖，使阅读异步代码更容易。 当我们使用async function 时，我们实际上在做的是创建一个常规的 function，其主体包裹在Promise中。

这也意味着，当您想要等待前一个Promise的结果时，您可以在Promise引用前面添加await并等待Promise完成。

所以你可能有如下代码：

const call = await ajax({ ... });
console.log(call);

这实际上转化为以下内容：

ajax({ ... }).then(call => {
  console.log(call);
});