JavaScript的异步编程模式-CSDN博客

Promise有三种状态：pending（待定）、fulfilled（已兑现）、rejected（已拒绝）。一旦Promise被resolve或reject，它就锁定在那个状态，不再改变。
比如一个简单的网络请求可以用Promise包装起来：

function getData(url) {
   
  return new Promise((resolve, reject) => {
   
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(Error('Network Error'));
    xhr.send();
  });
}

在这个例子中，当网络请求成功时，我们调用resolve方法；失败时调用reject方法。使用这个函数时，我们可以这样写：

getData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(err => console.error(err));

看到了吧？代码清晰了许多，像是解开了心中的结。
但别急，JavaScript的异步故事还有更多精彩。ES2017引入了async/await语法糖，它允许我们以同步的方式编写异步代码，使得代码逻辑更加直观易懂。
假设我们有一个基于Promise的delay函数，用来模拟异步延时操作：

function delay(ms) {
   
  return new Promise(resolve => setTimeout(resolve, ms));
}

使用async/await后，我们可以这样写：

async function demo() {
   
  console.log('Start');
  await delay(1000);
  console.log('End');
}

demo();

看似同步的代码结构背后，实际上是异步的操作。await关键字会让出线程控制权，直到对应的Promise解决或拒绝。