如何从异步调用返回响应？

→ 有关不同示例的异步行为的更一般解释，请参阅为什么我的变量在我在函数内部修改后没有改变？ - 异步代码参考 → 如果您已经了解问题，请跳至下面可能的解决方案。

问题

Ajax 中的 A 代表 asynchronous。这意味着发送请求（或者更确切地说是接收响应）从正常的执行流程中取出。在您的示例中，$.ajax 立即返回，并且在您作为 success 回调传递的函数甚至被调用之前执行下一条语句 return result;。

这是一个类比，它有望使同步流和异步流之间的区别更加清晰：

同步

想象一下，您给朋友打了个电话，请他为您查找一些东西。虽然这可能需要一段时间，但您在电话上等待并凝视空间，直到您的朋友给您所需的答案。

当您进行包含“正常”代码的函数调用时，也会发生同样的情况：

function findItem() {
    var item;
    while(item_not_found) {
        // search
    }
    return item;
}

var item = findItem();

// Do something with item
doSomethingElse();

尽管 findItem 可能需要很长时间才能执行，但 var item = findItem(); 之后的任何代码都必须等待，直到函数返回结果。

异步

你出于同样的原因再次打电话给你的朋友。但是这次你告诉他你有事，他应该用你的手机给你回电话。你挂断电话，离开家，做你打算做的任何事情。一旦你的朋友给你回电话，你就在处理他给你的信息。

这正是您执行 Ajax 请求时发生的情况。

findItem(function(item) {
    // Do something with the item
});
doSomethingElse();

不是等待响应，而是立即继续执行，并执行 Ajax 调用之后的语句。为了最终获得响应，您提供了一个在收到响应后调用的函数，即回调（注意什么？回调？）。在调用回调之前执行该调用之后的任何语句。

解决方案

拥抱 JavaScript 的异步特性！虽然某些异步操作提供同步对应物（“Ajax”也是如此），但通常不鼓励使用它们，尤其是在浏览器上下文中。

你问为什么不好？

JavaScript 在浏览器的 UI 线程中运行，任何长时间运行的进程都会锁定 UI，使其无响应。此外，JavaScript 的执行时间有一个上限，浏览器会询问用户是否继续执行。

所有这些都会导致非常糟糕的用户体验。用户将无法判断一切是否正常。此外，对于连接速度较慢的用户，效果会更差。

在下文中，我们将研究三种不同的解决方案，它们都建立在彼此之上：

带有 async/await 的 Promise（ES2017+，如果您使用转译器或再生器，则在旧版浏览器中可用）

回调（在节点中流行）

then() 的承诺（ES2015+，如果您使用众多承诺库之一，则可在较旧的浏览器中使用）

所有这三个都在当前浏览器和节点 7+ 中可用。

ES2017+：异步/等待的承诺

2017 年发布的 ECMAScript 版本为异步函数引入了语法级别的支持。在 async 和 await 的帮助下，您可以以“同步风格”编写异步。代码仍然是异步的，但更容易阅读/理解。

async/await 建立在 Promise 之上：async 函数总是返回一个 Promise。 await“解包”一个promise，或者导致promise 被解析的值，或者如果promise 被拒绝则抛出一个错误。

重要提示：您只能在 async 函数或 JavaScript module 中使用 await。模块外不支持顶级 await，因此如果不使用模块，您可能必须创建异步 IIFE (Immediately Invoked Function Expression) 来启动 async 上下文。

您可以在 MDN 上阅读有关 async 和 await 的更多信息。

下面是一个详细说明上述 delay 函数 findItem() 的示例：

// Using 'superagent' which will return a promise.
var superagent = require('superagent')

// This is isn't declared as `async` because it already returns a promise
function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}

async function getAllBooks() {
  try {
    // GET a list of book IDs of the current user
    var bookIDs = await superagent.get('/user/books');
    // wait for 3 seconds (just for the sake of this example)
    await delay();
    // GET information about each book
    return superagent.get('/books/ids='+JSON.stringify(bookIDs));
  } catch(error) {
    // If any of the awaited promises was rejected, this catch block
    // would catch the rejection reason
    return null;
  }
}

// Start an IIFE to use `await` at the top level
(async function(){
  let books = await getAllBooks();
  console.log(books);
})();

当前的 browser 和 node 版本支持 async/await。您还可以借助 regenerator（或使用再生器的工具，例如 Babel）将代码转换为 ES5 来支持旧环境。

让函数接受回调

回调是将函数 1 传递给函数 2。函数 2 可以在函数 1 准备就绪时调用它。在异步进程的上下文中，只要异步进程完成，就会调用回调。通常，结果被传递给回调。

在问题示例中，您可以让 foo 接受回调并将其用作 success 回调。所以这

var result = foo();
// Code that depends on 'result'

变成

foo(function(result) {
    // Code that depends on 'result'
});

在这里，我们定义了函数“内联”，但您可以传递任何函数引用：

function myCallback(result) {
    // Code that depends on 'result'
}

foo(myCallback);

foo 本身定义如下：

function foo(callback) {
    $.ajax({
        // ...
        success: callback
    });
}

callback 将引用我们在调用时传递给 foo 的函数，并将其传递给 success。即，一旦 Ajax 请求成功，$.ajax 将调用 callback 并将响应传递给回调（可以用 result 引用，因为这是我们定义回调的方式）。

您还可以在将响应传递给回调之前对其进行处理：

function foo(callback) {
    $.ajax({
        // ...
        success: function(response) {
            // For example, filter the response
            callback(filtered_response);
        }
    });
}

使用回调编写代码比看起来更容易。毕竟，浏览器中的 JavaScript 是高度事件驱动的（DOM 事件）。接收 Ajax 响应只不过是一个事件。当您必须使用第三方代码时可能会出现困难，但大多数问题都可以通过考虑应用程序流程来解决。

ES2015+：使用 then() 进行承诺

Promise API 是 ECMAScript 6 (ES2015) 的一个新特性，但它已经具有很好的 browser support。还有许多库实现了标准 Promises API 并提供了额外的方法来简化异步函数的使用和组合（例如，bluebird）。

Promise 是未来值的容器。当 Promise 接收到该值（已解决）或被取消（拒绝）时，它会通知所有想要访问该值的“侦听器”。

与普通回调相比，它们的优势在于它们允许您解耦代码并且它们更易于编写。

下面是一个使用 Promise 的例子：

function delay() { // `delay` 返回一个 promise return new Promise(function(resolve, reject) { // 只有 `delay` 能够解决或拒绝这个 promise setTimeout(function() { resolve(42); / / 3秒后，用值42解决promise }, 3000); }); } delay() .then(function(v) { // `delay` 返回一个 promise console.log(v); // 解析后记录值 }) .catch(function(v) { // 或者做如果它被拒绝 // （在这个例子中它不会发生，因为 `reject` 没有被调用）。 }); .as-console-wrapper { max-height: 100% !important;顶部：0； }

应用到我们的 Ajax 调用中，我们可以使用这样的 Promise：

函数 ajax(url) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.onload = function() { resolve(this.responseText); }; xhr.onerror = reject; xhr. open('GET', url); xhr.send(); }); } ajax("https://jsonplaceholder.typicode.com/todos/1") .then(function(result) { console.log(result); // 代码取决于结果 }) .catch(function() { / / 发生错误 }); .as-console-wrapper { max-height: 100% !important;顶部：0； }

描述承诺提供的所有优势超出了这个答案的范围，但如果你编写新代码，你应该认真考虑它们。它们为您的代码提供了很好的抽象和分离。

有关承诺的更多信息：HTML5 rocks - JavaScript Promises。

旁注：jQuery 的延迟对象

Deferred objects 是 jQuery 的 Promise 自定义实现（在 Promise API 标准化之前）。它们的行为几乎像 Promise，但暴露了稍微不同的 API。

jQuery 的每个 Ajax 方法都已经返回了一个“延迟对象”（实际上是一个延迟对象的承诺），您可以从函数中返回它：

function ajax() {
    return $.ajax(...);
}

ajax().done(function(result) {
    // Code depending on result
}).fail(function() {
    // An error occurred
});

旁注：承诺陷阱

请记住，承诺和延迟对象只是未来值的容器，它们不是值本身。例如，假设您有以下内容：

function checkPassword() {
    return $.ajax({
        url: '/password',
        data: {
            username: $('#username').val(),
            password: $('#password').val()
        },
        type: 'POST',
        dataType: 'json'
    });
}

if (checkPassword()) {
    // Tell the user they're logged in
}

此代码误解了上述异步问题。具体来说，$.ajax() 在检查服务器上的“/password”页面时不会冻结代码 - 它会向服务器发送请求，并在等待时立即返回 jQuery Ajax Deferred 对象，而不是来自服务器。这意味着 if 语句将始终获取此 Deferred 对象，将其视为 true，并像用户登录一样继续进行。不好。

但修复很简单：

checkPassword()
.done(function(r) {
    if (r) {
        // Tell the user they're logged in
    } else {
        // Tell the user their password was bad
    }
})
.fail(function(x) {
    // Tell the user something bad happened
});

不推荐：同步“Ajax”调用

正如我所提到的，一些（！）异步操作具有同步对应物。我不提倡使用它们，但为了完整起见，以下是执行同步调用的方式：

没有 jQuery

如果您直接使用 XMLHttpRequest 对象，请将 false 作为第三个参数传递给 .open。

jQuery

如果您使用 jQuery，您可以将 async 选项设置为 false。请注意，自 jQuery 1.8 起，此选项已弃用。然后，您仍然可以使用 success 回调或访问 jqXHR object 的 responseText 属性：

function foo() {
    var jqXHR = $.ajax({
        //...
        async: false
    });
    return jqXHR.responseText;
}

如果您使用任何其他 jQuery Ajax 方法，例如 $.get、$.getJSON 等，则必须将其更改为 $.ajax（因为您只能将配置参数传递给 $.ajax）。

请注意！无法发出同步 JSONP 请求。 JSONP 就其本质而言始终是异步的（甚至不考虑此选项的另一个原因）。

如果您没有在代码中使用 jQuery，那么这个答案适合您

你的代码应该是这样的：

function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
    return httpRequest.responseText;
}

var result = foo(); // Always ends up being 'undefined'

Felix Kling did a fine job 为使用 jQuery for AJAX 的人写一个答案，但我决定为不使用 jQuery 的人提供替代方案。

(Note, for those using the new fetch API, Angular or promises I've added another answer below)

你所面临的

这是另一个答案中“问题解释”的简短摘要，如果您在阅读后不确定，请阅读。

AJAX 中的 A 代表 asynchronous。这意味着发送请求（或者更确切地说是接收响应）从正常的执行流程中取出。在您的示例中，.send 立即返回，并且在您作为 success 回调传递的函数甚至被调用之前执行下一条语句 return result;。

这意味着当您返回时，您定义的侦听器尚未执行，这意味着您返回的值尚未定义。

这是一个简单的类比：

function getFive(){
    var a;
    setTimeout(function(){
         a=5;
    },10);
    return a;
}

(Fiddle)

返回的 a 的值为 undefined，因为 a=5 部分尚未执行。 AJAX 的行为是这样的，您在服务器有机会告诉您的浏览器该值是什么之前返回该值。

这个问题的一种可能的解决方案是重新编码，告诉你的程序在计算完成后要做什么。

function onComplete(a){ // When the code completes, do this
    alert(a);
}

function getFive(whenDone){
    var a;
    setTimeout(function(){
         a=5;
         whenDone(a);
    },10);
}

这称为 CPS。基本上，我们传递 getFive 一个动作完成时执行，我们告诉我们的代码如何在事件完成时做出反应（比如我们的 AJAX 调用，或者在这种情况下是超时）。

用法是：

getFive(onComplete);

这应该在屏幕上提醒“5”。 (Fiddle)。

可能的解决方案

基本上有两种方法可以解决这个问题：

使 AJAX 调用同步（我们称之为 SJAX）。重构您的代码以与回调一起正常工作。

1. 同步 AJAX - 不要这样做！

至于同步AJAX，千万别搞！ Felix 的回答引发了一些令人信服的论点，说明为什么这是一个坏主意。总而言之，它将冻结用户的浏览器，直到服务器返回响应并创建非常糟糕的用户体验。这是从 MDN 摘录的另一个简短摘要，说明了原因：

XMLHttpRequest 支持同步和异步通信。然而，一般来说，出于性能原因，异步请求应优先于同步请求。简而言之，同步请求会阻塞代码的执行……这可能会导致严重的问题……

如果您有这样做，您可以传递一个标志。 Here is how：

var request = new XMLHttpRequest();
request.open('GET', 'yourURL', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {// That's HTTP for 'ok'
  console.log(request.responseText);
}

2.重构代码

让您的函数接受回调。在示例代码 foo 中可以接受回调。当 foo 完成时，我们将告诉我们的代码如何反应。

所以：

var result = foo();
// Code that depends on `result` goes here

变成：

foo(function(result) {
    // Code that depends on `result`
});

这里我们传递了一个匿名函数，但我们也可以轻松传递对现有函数的引用，使其看起来像：

function myHandler(result) {
    // Code that depends on `result`
}
foo(myHandler);

有关如何完成此类回调设计的更多详细信息，请查看 Felix 的答案。

现在，让我们定义 foo 本身以相应地采取行动

function foo(callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onload = function(){ // When the request is loaded
       callback(httpRequest.responseText);// We're calling our method
    };
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
}

(fiddle)

我们现在让我们的 foo 函数接受在 AJAX 成功完成时运行的操作。我们可以通过检查响应状态是否不是 200 并采取相应措施（创建一个失败处理程序等）来进一步扩展它。它有效地解决了我们的问题。

如果您仍然难以理解这一点，请访问 MDN read the AJAX getting started guide。

XMLHttpRequest 2（首先，阅读 Benjamin Gruenbaum 和 Felix Kling 的答案）

如果你不使用 jQuery 并且想要一个在现代浏览器和移动浏览器中工作的漂亮的简短 XMLHttpRequest 2，我建议以这种方式使用它：

function ajax(a, b, c){ // URL, callback, just a placeholder
  c = new XMLHttpRequest;
  c.open('GET', a);
  c.onload = b;
  c.send()
}

如你看到的：

它比列出的所有其他功能都短。回调是直接设置的（因此没有额外的不必要的闭包）。它使用新的 onload（因此您不必检查 readystate && 状态） 还有一些我不记得的其他情况使 XMLHttpRequest 1 烦人。

有两种方法可以获取此 Ajax 调用的响应（三种使用 XMLHttpRequest var 名称）：

最简单的：

this.response

或者，如果由于某种原因您bind() 回调某个类：

e.target.response

例子：

function callback(e){
  console.log(this.response);
}
ajax('URL', callback);

或者（上面一个更好的匿名函数总是一个问题）：

ajax('URL', function(e){console.log(this.response)});

没有什么比这更容易的了。

现在可能有人会说最好使用onreadystatechange 甚至XMLHttpRequest 变量名。那是错误的。

查看XMLHttpRequest advanced features。

它支持所有*现代浏览器。而且我可以确认，自从 XMLHttpRequest 2 创建以来，我一直在使用这种方法。在我使用的任何浏览器中，我从来没有遇到过任何类型的问题。

onreadystatechange 仅在您想要获取状态 2 的标头时才有用。

使用 XMLHttpRequest 变量名是另一个大错误，因为您需要在 onload/oreadystatechange 闭包内执行回调，否则您会丢失它。

现在，如果您想要使用 POST 和 FormData 进行更复杂的操作，您可以轻松扩展此函数：

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val},placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.send(d||null)
}

再说一次……这是一个非常短的函数，但它会执行 GET 和 POST。

使用示例：

x(url, callback); // By default it's GET so no need to set
x(url, callback, 'post', {'key': 'val'}); // No need to set POST data

或者传递一个完整的表单元素 (document.getElementsByTagName('form')[0])：

var fd = new FormData(form);
x(url, callback, 'post', fd);

或者设置一些自定义值：

var fd = new FormData();
fd.append('key', 'val')
x(url, callback, 'post', fd);

如您所见，我没有实现同步......这是一件坏事。

话虽如此......为什么我们不做简单的方法呢？

正如评论中提到的，使用错误 && 同步确实完全打破了答案的重点。哪个是正确使用 Ajax 的好方法？

错误处理程序

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val}, placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.onerror = error;
  c.send(d||null)
}

function error(e){
  console.log('--Error--', this.type);
  console.log('this: ', this);
  console.log('Event: ', e)
}
function displayAjax(e){
  console.log(e, this);
}
x('WRONGURL', displayAjax);

在上面的脚本中，您有一个静态定义的错误处理程序，因此它不会损害功能。错误处理程序也可以用于其他功能。

但要真正摆脱错误，唯一的方法是编写错误的 URL，在这种情况下，每个浏览器都会抛出错误。

如果您设置自定义标头、将 responseType 设置为 blob 数组缓冲区或其他任何内容，错误处理程序可能会很有用...

即使您将 'POSTAPAPAP' 作为方法传递，它也不会引发错误。

即使您将 'fdggdgilfdghfldj' 作为 formdata 传递，它也不会引发错误。

在第一种情况下，错误位于 this.statusText 下的 displayAjax() 内，即 Method not Allowed。

在第二种情况下，它可以正常工作。如果您传递了正确的发布数据，您必须在服务器端进行检查。

不允许跨域自动抛出错误。

在错误响应中，没有任何错误代码。

只有 this.type 设置为 error。

如果您完全无法控制错误，为什么还要添加错误处理程序？大多数错误都在回调函数 displayAjax() 中返回。

所以：如果您能够正确复制和粘贴 URL，则不需要进行错误检查。 ;)

PS：作为第一个测试，我写了 x('x', displayAjax)...，它完全得到了响应...？？？所以我检查了HTML所在的文件夹，有一个名为'x.xml'的文件。因此，即使您忘记了文件的扩展名 XMLHttpRequest 2 也会找到它。我笑了

同步读取文件

不要那样做。

如果您想暂时阻止浏览器加载一个不错的大 .txt 文件同步。

function omg(a, c){ // URL
  c = new XMLHttpRequest;
  c.open('GET', a, true);
  c.send();
  return c; // Or c.response
}

现在你可以做

 var res = omg('thisIsGonnaBlockThePage.txt');

没有其他方法可以以非异步方式执行此操作。 （是的，使用 setTimeout 循环......但认真吗？）

另一点是...如果您使用 API 或只是您自己的列表文件或任何您总是为每个请求使用不同功能的东西...

仅当您有一个页面始终加载相同的 XML/JSON 或任何您只需要一个功能的页面时。在这种情况下，稍微修改 Ajax 函数并将 b 替换为您的特殊函数。

以上功能为基本使用。

如果要扩展功能...

是的你可以。

我使用了很多 API，我集成到每个 HTML 页面的第一个函数是这个答案中的第一个 Ajax 函数，只有 GET ......

但是你可以用 XMLHttpRequest 2 做很多事情：

我制作了一个下载管理器（使用简历、文件阅读器和文件系统两侧的范围）、使用画布的各种图像大小调整器转换器、使用 base64images 填充 Web SQL 数据库等等......

但在这些情况下，您应该只为此目的创建一个函数……有时您需要一个 blob、数组缓冲区、您可以设置标题、覆盖 mimetype 等等……

但这里的问题是如何返回 Ajax 响应......（我添加了一个简单的方法。）

如果您使用的是 Promise，那么这个答案适合您。

这意味着 AngularJS、jQuery（带延迟）、本机 XHR 的替换（提取）、Ember.js、Backbone.js 的保存或任何返回承诺的 Node.js 库。

你的代码应该是这样的：

function foo() {
    var data;
    // Or $.get(...).then, or request(...).then, or query(...).then
    fetch("/echo/json").then(function(response){
        data = response.json();
    });
    return data;
}

var result = foo(); // 'result' is always undefined no matter what.

Felix Kling did a fine job 为使用带有 Ajax 回调的 jQuery 的人编写答案。我有一个原生 XHR 的答案。这个答案适用于前端或后端的 Promise 的通用用法。

核心问题

浏览器和服务器上的 JavaScript 并发模型与 Node.js/io.js 是异步和反应式的。

每当您调用返回 Promise 的方法时，then 处理程序总是 异步执行 - 即，在它们下方不在 .then 中的代码之后处理程序。

这意味着当您返回 data 时，您定义的 then 处理程序尚未执行。这反过来意味着您返回的值没有及时设置为正确的值。

这是这个问题的一个简单类比：

函数 getFive(){ var 数据； setTimeout(function(){ // 设置未来一秒的定时器 data = 5; // 一秒后，执行此操作 }, 1000);返回数据； } document.body.innerHTML = getFive(); // 这里是 `undefined` 而不是 5

data 的值为 undefined，因为 data = 5 部分尚未执行。它可能会在一秒钟内执行，但到那时它与返回值无关。

由于操作尚未发生（Ajax、服务器调用、I/O 和计时器），您在请求有机会告诉您的代码该值是什么之前返回该值。

这个问题的一种可能的解决方案是重新编写代码，告诉你的程序在计算完成后要做什么。 Promise 通过本质上是临时的（时间敏感的）来积极地实现这一点。

快速回顾承诺

Promise 是一个随时间变化的值。 Promise 有状态。它们以没有价值的待处理开始，并且可以解决：

完成意味着计算成功完成。

拒绝意味着计算失败。

一个promise 只能改变状态一次，之后它将永远保持在同一个状态。您可以将 then 处理程序附加到 Promise 以提取它们的值并处理错误。 then 处理程序允许 chaining 次调用。 Promise 由 using APIs that return them 创建。例如，更现代的 Ajax 替换 fetch 或 jQuery 的 $.get 返回承诺。

当我们在一个 Promise 上调用 .then 并从中返回一些东西时 - 我们得到一个 已处理值 的 Promise。如果我们兑现另一个承诺，我们会得到惊人的东西，但让我们抓住我们的马。

带着承诺

让我们看看如何用 Promise 解决上述问题。首先，让我们通过使用 Promise constructor 创建延迟函数来展示我们对上述承诺状态的理解：

function delay(ms){ // Takes amount of milliseconds
    // Returns a new promise
    return new Promise(function(resolve, reject){
        setTimeout(function(){ // When the time is up,
            resolve(); // change the promise to the fulfilled state
        }, ms);
    });
}

现在，在我们 converted setTimeout 使用 Promise 之后，我们可以使用 then 使其计数：

function delay(ms){ // 花费毫秒数 // 返回一个新的 promise return new Promise(function(resolve, reject){ setTimeout(function(){ // 时间到了，resolve(); // 改变对已完成状态的承诺 }, ms); }); } function getFive(){ // 我们正在返回承诺。请记住，promise 是我们的值的包装器 return delay(100).then(function(){ // 当 promise 准备好时，返回 5; // 返回值 5。Promise 都是关于返回值 }) } / / 我们_必须_在调用站点中像这样包装它，我们无法访问纯值 getFive().then(function(five){ document.body.innerHTML = 五; });

基本上，我们不是返回一个由于并发模型而无法执行的 value - 我们返回一个 wrapper 以获取我们可以 unwrap< /em> 与 then。它就像一个可以用 then 打开的盒子。

function foo() {
    // RETURN the promise
    return fetch("/echo/json").then(function(response){
        return response.json(); // Process it inside the `then`
    });
}

foo().then(function(response){
    // Access the value inside the `then`
})

function* foo(){ // Notice the star. This is ES6, so new browsers, Nodes.js, and io.js only
    yield 1;
    yield 2;
    while(true) yield 3;
}

var foo = coroutine(function*(){
    var data = yield fetch("/echo/json"); // Notice the yield
    // The code here only executes _after_ the request is done
    return data.json(); // 'data' is defined
});

var main = coroutine(function*(){
   var bar = yield foo(); // Wait our earlier coroutine. It returns a promise
   // The server call is done here, and the code below executes when done
   var baz = yield fetch("/api/users/" + bar.userid); // Depends on foo's result
   console.log(baz); // Runs after both requests are done
});
main();

async function foo(){
    var data = await fetch("/echo/json"); // Notice the await
    // code here only executes _after_ the request is done
    return data.json(); // 'data' is defined
}