深入TypeScript中Promise的高级用法：高级技巧与避坑指南

逐星ing

于 2024-06-07 09:39:19 发布

阅读量1.1k

点赞数 12

分类专栏：前端 # nodejs TypeScript 文章标签： typescript javascript 前端 node.js

本文链接：https://blog.csdn.net/qq_41791705/article/details/139516284

版权

前端同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

TypeScript

34 篇文章 0 订阅

订阅专栏

nodejs

6 篇文章 0 订阅

订阅专栏

基础部分

引言

Promise是JavaScript中处理异步编程的核心构件，掌握其高级用法对于编写健壯、高效的异步代码至关重要。然而，在使用过程中也存在一些常见的陷阱，尤其是在处理循环和数据流时。

基础知识

Promise：代表了一个异步操作的最终完成或失败。
链式调用：通过.then()和.catch()方法实现Promise的链式调用。

核心概念

错误处理：在Promise链中正确处理错误至关重要。
循环中的Promise：在循环中创建和处理多个Promise时需要特别小心。

示例演示

Promise链式调用：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => processData(data))
  .catch(error => console.error('Fetch error:', error));

在循环中使用Promise：

const urls = ['url1', 'url2', 'url3'];
const fetchAll = () => {
  return Promise.all(urls.map(url => fetch(url)));
};

实际应用

在处理大量异步操作，如API请求或文件读写时，高级Promise技巧可以显著提升性能。

并行处理多个请求：

Promise.allSettled([fetch(url1), fetch(url2)])
  .then(results => {
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`Data from ${urls[index]}:`, result.value);
      }
    });
  });

深入与最佳实践

避免在循环中创建Promise：不要在循环中创建大量的Promise实例，这可能导致性能问题。
使用Promise.allSettled：代替Promise.all，它可以处理循环中每个Promise的结果，无论成功或失败。

当然，以下是一些在实际开发中使用Promise时可能遇到的场景，以及如何避免常见陷阱的示例：

1. 处理异步循环

错误用法：在循环中直接使用then可能导致回调地狱。

// 错误示例
for (let i = 0; i < urls.length; i++) {
  fetch(urls[i])
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}

正确用法：使用Promise.all来并行处理所有异步操作。

// 正确示例
const promises = urls.map(url => fetch(url).then(response => response.json()));
Promise.all(promises)
  .then(dataArray => dataArray.forEach(data => console.log(data)))
  .catch(error => console.error(error));

2. 顺序执行异步操作

场景：需要按照特定顺序执行多个异步操作。

正确用法：使用then链来顺序执行。

fetch(url1)
  .then(response => response.json())
  .then(data => {
    return fetch(url2, { body: JSON.stringify(data) });
  })
  .then(response => response.json())
  .then(finalData => console.log(finalData))
  .catch(error => console.error(error));

3. 错误处理

场景：在Promise链中忽略了错误处理。

正确用法：在每个then之后添加catch，或在链的末尾添加catch。

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

4. 使用`async/await`重写Promise链

场景：使异步代码更易读和维护。

正确用法：使用async/await替代then和catch。

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

fetchData();

5. 避免在Promise中混用`return`和`await`

错误用法：在await之后使用return，这可能导致意外的行为。

// 错误示例
async function getJSON() {
  let response = await fetch(url);
  return response.json(); // 这里return的是一个Promise
}

正确用法：确保await表达式直接赋值给变量。

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

6. 处理多个异步操作的拒绝

场景：使用Promise.all时，一个失败不应该导致整个操作失败。

正确用法：使用Promise.allSettled来处理每个Promise的结果。

Promise.allSettled(promises)
  .then(results => {
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`Success for ${urls[index]}:`, result.value);
      } else {
        console.error(`Error for ${urls[index]}:`, result.reason);
      }
    });
  });