async在js中作用

原创

ithorizon 7个月前 (10-03) 阅读数 109 #Javascript

异步编程在JavaScript中的重要作用

在现代的Web开发中，异步编程已经成为了一种重要的编程范式。在JavaScript中，async关键字及相关特性促使异步编程变得更加简洁和易于明白。本文将探讨async在JavaScript中的作用，以及它是怎样改善我们的编程体验的。

1. 异步编程的背景

传统的JavaScript编程是基于单线程的，这意味着如果某个操作需要花费较长时间，比如从服务器请求数据，整个程序将会被阻塞，引起用户界面冻结，从而影响用户体验。

2. 回调函数的困境

为了解决这个问题，开发者们起初使用回调函数。回调函数确实能够处理异步操作，但是当异步操作过多时，代码将变得难以维护，出现所谓的“回调地狱”。


function fetchData(url, callback) {
  setTimeout(() => {
    callback(data);
  }, 1000);
}
fetchData('http://example.com/api/data1', (data1) => {
  fetchData('http://example.com/api/data2', (data2) => {
    fetchData('http://example.com/api/data3', (data3) => {
      console.log(data1, data2, data3);
    });
  });
});

3. Promise的出现

为了解决回调地狱的问题，Promise应运而生。Promise允许我们以链式调用的方案处理异步操作，促使代码更加明确。但是，Promise仍然有一定的复杂化性，尤其是当涉及到多个异步操作时。

4. async和await关键字

ES2017引入了async和await关键字，促使异步编程变得更加单纯。使用async关键字，我们可以创建一个异步函数，而在该函数内部，可以使用await关键字等待异步操作完成。


async function fetchDataAsync(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}
async function main() {
  const data1 = await fetchDataAsync('http://example.com/api/data1');
  const data2 = await fetchDataAsync('http://example.com/api/data2');
  const data3 = await fetchDataAsync('http://example.com/api/data3');
  console.log(data1, data2, data3);
}
main();