Promise async/await与fetch的概念

Promise 的概念

Promise 是 JavaScript 中用于处理异步操作的对象，代表一个异步操作的最终完成（或失败）及其结果值。它提供了一种更优雅的方式来处理回调地狱（Callback Hell），使代码更易读和维护。

Promise 的状态

Promise 有三种状态：

Pending（等待中）：初始状态，既不是成功也不是失败。
Fulfilled（已成功）：操作成功完成，Promise 返回结果值。
Rejected（已失败）：操作失败，Promise 返回错误原因。

状态一旦改变（从 Pending 到 Fulfilled 或 Rejected），就不会再变。

Promise 的基本用法

创建一个 Promise 对象：

javascript 复制代码

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 成功条件 */) {
    resolve('成功的结果');
  } else {
    reject('失败的原因');
  }
});

Promise 的方法

then()

用于注册 Promise 成功或失败的回调函数：

javascript 复制代码

promise.then(
  (result) => { console.log(result); }, // 成功时调用
  (error) => { console.error(error); }  // 失败时调用
);

catch()

专门处理 Promise 的失败状态：

javascript 复制代码

promise.catch((error) => {
  console.error(error);
});

finally()

无论成功或失败都会执行：

javascript 复制代码

promise.finally(() => {
  console.log('操作结束');
});

Promise 的链式调用

Promise 支持链式调用，避免回调嵌套：

javascript 复制代码

promise
  .then((result) => {
    return result + ' 处理1';
  })
  .then((result) => {
    console.log(result); // 输出：成功的结果 处理1
  })
  .catch((error) => {
    console.error(error);
  });

Promise 的静态方法

Promise.resolve()

返回一个已成功的 Promise：

javascript 复制代码

Promise.resolve('成功').then((result) => {
  console.log(result); // 输出：成功
});

Promise.reject()

返回一个已失败的 Promise：

javascript 复制代码

Promise.reject('失败').catch((error) => {
  console.error(error); // 输出：失败
});

Promise.all()

等待所有 Promise 完成，或其中一个失败：

javascript 复制代码

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results); // 所有成功结果的数组
  })
  .catch((error) => {
    console.error(error); // 任一失败的错误
  });

Promise.race()

返回第一个完成（成功或失败）的 Promise：

javascript 复制代码

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // 第一个完成的结果
  })
  .catch((error) => {
    console.error(error); // 第一个失败的错误
  });

实际应用示例

模拟异步请求：

javascript 复制代码

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5;
      if (success) {
        resolve('数据获取成功');
      } else {
        reject('数据获取失败');
      }
    }, 1000);
  });
}

fetchData()
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Promise 是现代 JavaScript 异步编程的核心，结合 async/await 语法可以进一步简化代码。

async/await 与 fetch 的使用方法

async/await 是 JavaScript 中处理异步操作的语法糖，结合 fetch API 可以更简洁地处理网络请求。以下是具体实现方式：

基本用法

使用 async/await 调用 fetch 时，需要在 async 函数中通过 await 等待 Promise 解析：

javascript 复制代码

async function fetchData(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

错误处理

通过 try/catch 捕获请求过程中的异常：

javascript 复制代码

async function fetchDataWithErrorHandling(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error('Fetch failed:', error);
  }
}

请求配置

可以传递初始化参数（如 method、headers 等）到 fetch：

javascript 复制代码

async function postData(url, payload) {
  const response = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
  return response.json();
}

并行请求

使用 Promise.all 实现多个并行请求：

javascript 复制代码

async function fetchMultipleUrls(urls) {
  const promises = urls.map(url => fetch(url).then(res => res.json()));
  return Promise.all(promises);
}

注意事项

fetch 默认不会 reject HTTP 错误状态（如 404），需要手动检查 response.ok
网络请求失败（如 CORS 错误）会自动 reject Promise
使用 await 时，确保外层函数有 async 声明

这种模式比传统的 Promise 链式调用更直观，尤其适合需要顺序处理多个异步操作的场景。