如何开始一个Promise，Promise的基本结构以及使用场景都有哪些

😉 你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我😁，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。

概念

Promise 是ES6引入的一种异步编程解决方案，用于处理回调地狱问题。它代表一个异步操作的最终完成（或失败），以及返回的值。Promise有三种状态：

Pending（进行中）

在异步操作未完成之前，Promise 处于 Pending 状态。

Fulfilled（已完成）

如果异步操作成功，Promise 被解决（resolved），并通过 resolve 函数传递结果。

Rejected（已失败）

如果异步操作失败，Promise 被拒绝（rejected），并通过 reject 函数传递错误信息。

Promise基本结构

function simulateAsyncOperation() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      // 随机决定是否成功
      const isSuccess = Math.random() < 0.5;
      
      if (isSuccess) {
        // 操作成功
        resolve({ status: 'fulfilled', message: 'Operation completed successfully.' });
      } else {
        // 操作失败
        reject({ status: 'rejected', message: 'Operation failed.' });
      }
    }, 2000); // 模拟 2 秒的延迟
  });
}

// 创建 Promise 实例
const promise = simulateAsyncOperation();

// 处理 Promise 的三种状态
promise
  .then(result => {
    console.log('Fulfilled:', result.message);
  })
  .catch(error => {
    console.error('Rejected:', error.message);
  })
  .finally(() => {
    console.log('Promise is now settled.');
  });

.then() 用于处理成功，.catch() 用于处理失败，.finally()则无论结果如何都会执行。

Promise的使用场景

1. 异步请求（AJAX）

Promise常用于处理HTTP请求的异步响应，如获取远程服务器数据。使用 fetch API 进行 AJAX 请求是一个非常典型的使用 Promise 来处理异步操作的例子。下面是一个完整的示例，展示如何使用 fetch 来获取远程服务器的数据，并处理请求的成功和失败情况。

// 模拟一个异步请求，获取远程服务器的数据
function fetchDataFromServer(url) {
 return fetch(url)
 .then(response => {
   if (!response.ok) {
     throw new Error(`Network response was not ok: ${response.statusText}`);
   }
   return response.json(); // 解析 JSON 响应
 })
 .then(data => {
   console.log('Data fetched successfully:', data);
   return data; // 返回解析后的数据
 })
 .catch(error => {
   console.error('Failed to fetch data:', error);
   throw error; // 抛出错误以便进一步处理
 });
}

// 调用 fetchDataFromServer 函数
const url = 'https://api.example.com/data';
fetchDataFromServer(url)
.then(data => {
 // 在这里处理成功获取的数据
 console.log('Handling fetched data:', data);
})
.catch(error => {
 // 在这里处理请求失败的情况
 console.error('Error handling in the outer catch block:', error);
});

代码解释

发起请求

使用 fetch 发起请求，传入 URL 地址。
fetch 返回一个 Promise，该 Promise 解析为 Response 对象。

处理响应

使用 .then 方法处理 Response 对象。
检查响应的状态是否为 ok（HTTP 状态码 200-299 范围内），如果不是，则抛出错误。
使用 response.json() 解析 JSON 格式的响应体。

解析数据

第二个 .then 处理解析后的 JSON 数据，并打印出来。
返回数据以便进一步处理。

错误处理

使用 .catch 方法捕获前面任何一个 then 中抛出的错误。
打印错误信息，并再次抛出错误，以便外部 catch 可以捕获。

外部处理

最后一个 .then 和 .catch 是在 fetchDataFromServer 函数外部调用的，用于进一步处理数据或错误。

注意事项

错误处理

在 .then 链中加入错误处理是非常重要的，尤其是在网络请求中，因为网络问题、服务器错误、解析错误等情况都可能导致请求失败。

API URL

请确保替换示例中的 url 变量为你实际需要请求的 API 地址。

跨域问题

如果请求的目标服务器与当前站点不在同一域名下，可能会遇到跨域问题。确保服务器正确设置了 CORS 头或者使用代理服务器解决跨域问题。

2. 文件读取/写入（Node.js）

在Node.js中，可以用Promise封装文件操作，避免嵌套的回调函数。

const fs = require('fs').promises;
fs.readFile('file.txt', 'utf8')
  .then(data => console.log(data))
  .catch(err => console.error(err));

3. 多个异步操作并行处理

使用 Promise.all() 来同时处理多个异步操作是一种常见的做法。这种方法允许你在所有指定的异步操作都完成之后才进行下一步处理。下面是一个完整的示例，展示如何使用 Promise.all() 来并发处理多个 fetch 请求。

// 定义要请求的 URL 列表
const urls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2'
];

// 使用 Promise.all 同时发起多个 fetch 请求
Promise.all(urls.map(url => fetch(url)))
  .then(responses => {
    // 处理多个请求的 Response 对象
    // 这里的 responses 是一个 Response 对象数组
    return Promise.all(responses.map(response => {
      if (!response.ok) {
        throw new Error(`Network response was not ok: ${response.statusText}`);
      }
      return response.json(); // 解析 JSON 响应
    }));
  })
  .then(data => {
    // 在这里处理成功获取的所有数据
    console.log('All data fetched successfully:', data);
  })
  .catch(error => {
    // 在这里处理请求失败的情况
    console.error('Failed to fetch data:', error);
  });

代码解释

定义 URL 列表

urls 数组包含了你要请求的 URL 地址列表。

使用 Promise.all 发起请求

使用 Array.prototype.map 方法将每个 URL 转换为 fetch 请求的 Promise。
Promise.all 接受一个 Promise 对象的数组作为参数，返回一个新的 Promise，这个新的 Promise 只有在所有的输入 Promise 都解析完成后才会解析，并返回一个数组，数组中的元素是输入 Promise 的解析值。

处理响应

第一个 .then 处理 responses，其中 responses 是一个包含所有请求返回的 Response 对象的数组。
检查每个 Response 是否 ok（HTTP 状态码 200-299 范围内），如果不是，则抛出错误。
使用 Promise.all 来并发解析所有的 JSON 响应。

解析数据

第二个 .then 处理解析后的 JSON 数据，并打印出来。
返回数据以便进一步处理。

错误处理

使用 .catch 方法捕获前面任何一个 then 中抛出的错误。
打印错误信息，并可以在此处添加更多错误处理逻辑。

注意事项

错误传播

如果有任何一个请求失败（例如，网络问题、服务器错误等），Promise.all 返回的 Promise 会立即被拒绝，并且不会等待其他请求完成。

URL 替换

请确保将示例中的 urls 数组中的 URL 替换为你实际需要请求的 API 地址。

CORS 问题

如果请求的目标服务器与当前站点不在同一域名下，可能会遇到跨域问题。确保服务器正确设置了 CORS 头或者使用代理服务器解决跨域问题。

这个示例展示了如何使用 Promise.all 来并发处理多个异步请求，并且如何优雅地处理请求的成功和失败情况。

4. 复杂的异步逻辑链

使用 Promise 链可以简化多步骤的异步操作，特别是当这些操作之间存在顺序依赖关系时。下面是一个示例，展示如何使用 Promise 链来串联多个异步操作步骤。

假设我们有三个异步操作步骤：step1、step2 和 step3，并且每个步骤都依赖于前一步骤的结果。我们可以这样来实现：

// 模拟异步操作函数
function asyncOperation() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Initial value'); // 返回初始值
    }, 1000); // 模拟 1 秒延迟
  });
}

function step1(value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('Executing step 1...');
      resolve(value + ' processed by step 1');
    }, 1000); // 模拟 1 秒延迟
  });
}

function step2(value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('Executing step 2...');
      resolve(value + ' processed by step 2');
    }, 1000); // 模拟 1 秒延迟
  });
}

function step3(value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('Executing step 3...');
      resolve(value + ' processed by step 3');
    }, 1000); // 模拟 1 秒延迟
  });
}

// 使用 Promise 链来串联多个异步操作步骤
asyncOperation()
  .then(step1)
  .then(step2)
  .then(step3)
  .then(finalValue => {
    console.log('Final value:', finalValue);
  })
  .catch(error => {
    console.error('Error occurred:', error);
  });

代码解释

定义异步操作函数

asyncOperation 模拟一个初始的异步操作，返回一个 Promise，并在 1 秒后解析为初始值。

定义步骤函数

step1、step2 和 step3 分别代表三个步骤的异步操作。每个步骤都是一个返回 Promise 的函数，并且在 1 秒后解析为经过处理的值。

使用 Promise链

使用 .then 方法来串联多个异步操作步骤。每个步骤函数接收前一步骤返回的结果，并返回下一个步骤所需的结果。
最后一个 .then 用于处理最终的结果。
使用 .catch 方法来捕获并处理任何在链中发生的错误。

运行结果

当你运行上面的代码时，控制台将依次输出：

Executing step 1...
Executing step 2...
Executing step 3...
Final value: Initial value processed by step 1 processed by step 2 processed by step 3

注意事项

错误处理

确保在 Promise 链中包含错误处理逻辑，这样可以在任何步骤发生错误时中断执行并处理错误。

函数返回类型

确保每个步骤函数返回的是 Promise，这样才能正确地串联起来。

延迟模拟

这里的 setTimeout 仅用于模拟异步延迟，实际应用中可能涉及真正的异步操作，如网络请求等。

通过这种方式，你可以将多个异步操作步骤按照顺序串联起来，并且每个步骤都可以依赖前一步骤的结果，从而简化复杂的异步流程处理。

优点

避免了回调地狱。
提供了结构化的错误处理机制。
易于管理和组合异步操作。

缺点

相较于async/await，Promise链可能仍然较为复杂。
必须小心状态管理，尤其是未处理的Promise状态。