async await和promise区别和联系

2023-07-18 分类：站长随笔 评论(0)

JavaScript新标准（ECMA 17）中加入了两个关键字：async、await。

ECMAScript

async await跟Promise有啥联系？

简单来说，async await是基于Promise之上的一个语法糖，可以让异步操作更加地简单明了。

首先我们需要使用async关键字将函数标记为异步函数。（异步函数是指返回值为Promise对象的函数）

async function f() {
  
}

f(); // 这个函数返回值永远是 Promise 对象

在异步函数中我们可以调用其他的异步函数，不过我们不再需要使用then()，而是使用一个更加简洁的await语法，await会等待Promise完成之后直接返回最终的结果，所以这里的response已经是服务器返回的相应数据了：

async function f() {
  const response = await fetch("http://...");
}

f();

需要注意的是，await虽然看上去会暂停函数的执行，但在等待的过程中，JavaScript同样可以处理其它的任务，比如更新界面、运行其它程序代码等等，这是因为await底层是基于Promise和事件循环机制实现的。

async function f() {
  const response = await fetch("http://...");
  const json = await response.json();
  console.log(json);
}

f();

相关推荐