JavaScript中的Promise、Async和Await

Promise 基础

Promise是JavaScript中用于处理异步操作的一个关键概念。它代表了一个尚未完成但预期在将来完成的操作。使用Promise，可以避免所谓的“回调地狱”，即多层嵌套的回调函数，从而使代码更加清晰和易于维护。

代码示例：创建一个基本的Promise

let promise = new Promise(function(resolve, reject) {
  // 异步操作代码
  setTimeout(() => {
    resolve("操作成功");
  }, 1000);
});
 
promise.then((value) => {
  console.log(value); // 输出：操作成功
});

Promise 的状态

• pending（待定） ：初始状态，既不是成功，也不是失败。
• fulfilled（已实现） ：意味着操作成功完成。
• rejected（已拒绝） ：意味着操作失败。

代码示例：展示不同状态的Promises

let fulfilledPromise = Promise.resolve('成功');
let rejectedPromise = Promise.reject('失败');
 
fulfilledPromise.then(value => console.log(value)); // 输出：成功
rejectedPromise.catch(error => console.log(error)); // 输出：失败

链式调用和错误处理

Promise的另一个优点是可以通过链式调用.then()和.catch()方法来处理复杂的异步流程。

代码示例：展示链式调用和错误处理

new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
})
.then(result => {
    console.log(result); // 输出 1
    return result * 2;
})
.then(result => {
    console.log(result); // 输出 2
    return result * 3;
})
.then(result => {
    console.log(result); // 输出 6
    return result * 4;
})
.catch(error => {
    console.log('捕获到错误：', error);
});

Async 函数

通过在函数声明前加上async关键字，可以将任何函数转换为返回Promise的异步函数。这意味着你可以使用.then()和.catch()来处理它们的结果。

代码示例：创建一个async函数

async function asyncFunction() {
  return "异步操作完成";
}
 
asyncFunction().then(value => console.log(value)); // 输出：异步操作完成

Await 关键字

await关键字只能在async函数内部使用。它可以暂停async函数的执行，等待Promise的解决（resolve），然后以Promise的值继续执行函数。

代码示例：在async函数中使用await

async function asyncFunction() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("完成"), 1000)
  });
 
  let result = await promise; // 等待，直到promise解决 (resolve)
  console.log(result); // "完成"
}
 
asyncFunction();

错误处理

在async/await中，错误处理可以通过传统的try…catch语句实现，这使得异步代码的错误处理更加直观。

代码示例：使用try…catch处理错误

async function asyncFunction() {
  try {
    let response = await fetch('http://example.com');
    let data = await response.json();
    // 处理数据
  } catch (error) {
    console.log('捕获到错误：', error);
  }
}
 
asyncFunction();