es6 基础学习之Promise和async await的相关

ES6 中的 Promise

Promise 是 ES6 中引入的一个构造函数，用于处理异步操作。一个 Promise 对象代表一个还没有完成但预计将在未来完成的操作。

创建一个 Promise

一个 Promise 的基础语法如下：

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 操作成功 */) {
    resolve('Success');
  } else {
    reject('Error');
  }
});

使用 Promise

你可以使用 .then() 和 .catch() 方法来处理 Promise。

myPromise
  .then((result) => {
    console.log(result); // 输出 'Success'
  })
  .catch((error) => {
    console.log(error); // 输出 'Error'
  });

链式调用

Promise 可以链式调用：

Promise.resolve('Success')
  .then((result) => {
    return result + ' - Step 1';
  })
  .then((result) => {
    console.log(result); // 输出 'Success - Step 1'
  });

并行执行多个 Promise

使用 Promise.all：

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results); // 输出 [1, 2]
  });

ES8 中的 async 和 await

ES8（ECMAScript 2017）引入了 async 和 await 关键字，使异步代码更像同步代码。

使用 async 和 await

一个简单的例子：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Fetch failed:', error);
  }
}

在这个例子中，fetchData 函数前面有一个 async 关键字，表示这是一个异步函数。在异步函数内部，你可以使用 await 关键字等待一个 Promise 完成并返回其结果。

错误处理

使用 try/catch 结构进行错误处理。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Fetch failed:', error);
  }
}

并行执行多个异步操作

使用 Promise.all 和 await：

async function fetchData() {
  const [data1, data2] = await Promise.all([fetch('url1'), fetch('url2')]);
  // Do something with data1 and data2
}

Promise 和 async/await 都是处理异步操作的强大工具。async/await 基于 Promise 实现，但提供了更直观、更易读的语法。希望这些信息能帮助你更好地理解和使用这些异步编程特性。