JavaScript的异步编程模式

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解决或拒绝。

posted @ 2025-06-25 10:49  风一直那个吹  阅读(2)  评论(0)    收藏  举报