溫馨提示×

JavaScript異步函數(shù)有哪些創(chuàng)新用法

小樊
81
2024-10-25 14:00:12
欄目: 編程語言

JavaScript 異步函數(shù)的創(chuàng)新用法有很多,以下是一些常見的用法:

  1. Promise 鏈?zhǔn)秸{(diào)用:Promise 是一種異步編程的解決方案,它可以將多個異步操作以鏈?zhǔn)秸{(diào)用的方式組織起來,使得代碼更加簡潔和易于維護(hù)。例如:
function asyncOperation1() {
  return new Promise((resolve, reject) => {
    // 異步操作
    resolve('result1');
  });
}

function asyncOperation2(param) {
  return new Promise((resolve, reject) => {
    // 異步操作
    resolve(`result2 with ${param}`);
  });
}

asyncOperation1()
  .then(result1 => {
    console.log(result1);
    return asyncOperation2(result1);
  })
  .then(result2 => {
    console.log(result2);
  })
  .catch(error => {
    console.error(error);
  });
  1. async/await 語法:async/await 是 ES7 引入的一種新的異步編程語法,它使得異步代碼看起來更像同步代碼,提高了代碼的可讀性和可維護(hù)性。例如:
async function asyncOperation1() {
  // 異步操作
  return 'result1';
}

async function asyncOperation2(param) {
  // 異步操作
  return `result2 with ${param}`;
}

(async function() {
  try {
    const result1 = await asyncOperation1();
    console.log(result1);
    const result2 = await asyncOperation2(result1);
    console.log(result2);
  } catch (error) {
    console.error(error);
  }
})();
  1. Promise.all() 和 Promise.race():Promise.all() 方法可以接受一個 Promise 數(shù)組作為參數(shù),當(dāng)所有的 Promise 都成功 resolve 時,返回一個新的 Promise,其結(jié)果是一個包含所有 Promise 結(jié)果的數(shù)組;如果有一個 Promise 被 reject,則返回的 Promise 也會被 reject,并帶有第一個被 reject 的 Promise 的錯誤信息。Promise.race() 方法可以接受一個 Promise 數(shù)組作為參數(shù),返回一個新的 Promise,這個新的 Promise 會在輸入的 Promise 中的任何一個成功或失敗時立即以同樣的結(jié)果結(jié)束。例如:
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('one'), 100);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('two'), 200);
});

Promise.all([promise1, promise2]).then(values => {
  console.log(values); // ['one', 'two']
});

Promise.race([promise1, promise2]).then(value => {
  console.log(value); // 'one'
});
  1. 異步迭代器:異步迭代器是一種新的語法,它允許你在異步操作中使用 for…of 循環(huán)。例如:
async function asyncIterable() {
  for (let i = 0; i < 3; i++) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    yield `result${i}`;
  }
}

(async function() {
  for await (const result of asyncIterable()) {
    console.log(result); // 'result0', 'result1', 'result2'
  }
})();

0