JavaScript Promise错误处理

介绍

在JavaScript异步编程中，Promise是一个强大的工具，让我们能以更优雅的方式处理异步操作。但是，与所有编程一样，错误是不可避免的。适当的错误处理不仅可以帮助我们调试代码，还能提供更好的用户体验，防止应用程序崩溃。

本文将全面介绍Promise错误处理的各种方法和最佳实践，帮助你编写更健壮的JavaScript异步代码。

Promise错误处理的基础

当Promise执行过程中发生错误时，它会从pending状态转变为rejected状态。我们需要捕获并处理这些错误，否则它们可能会导致未捕获的Promise异常。

使用catch()方法

catch()方法是处理Promise错误的最基本方式。它接收一个回调函数，当Promise被拒绝时执行。

javascript

const myPromise = new Promise((resolve, reject) => {
  // 模拟一个失败的异步操作
  setTimeout(() => {
    reject(new Error('操作失败'));
  }, 1000);
});

myPromise
  .then(result => {
    console.log('成功:', result); // 不会执行到这里
  })
  .catch(error => {
    console.error('失败:', error.message); // 输出: 失败: 操作失败
  });

在then()中处理错误

then()方法可以接收两个参数：第一个处理成功情况，第二个处理错误情况。

javascript

myPromise.then(
  result => console.log('成功:', result),
  error => console.error('失败:', error.message) // 输出: 失败: 操作失败
);

警告

虽然可以在then()中处理错误，但建议使用catch()方法，因为它可以捕获在then()回调中发生的错误，而then()的第二个参数不能。

Promise链中的错误处理

在Promise链中，错误会沿着链向下传递，直到遇到错误处理程序。

javascript

Promise.resolve(1)
  .then(value => {
    console.log(value); // 输出: 1
    throw new Error('链中发生错误');
  })
  .then(value => {
    // 不会执行到这里
    console.log(value);
  })
  .catch(error => {
    console.error('捕获到错误:', error.message); // 输出: 捕获到错误: 链中发生错误
    return '恢复后的值';
  })
  .then(value => {
    console.log('继续执行:', value); // 输出: 继续执行: 恢复后的值
  });

使用finally()方法

无论Promise成功还是失败，finally()方法都会执行，这对于清理资源非常有用。

javascript

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络请求失败');
    }
    return response.json();
  })
  .then(data => {
    console.log('获取的数据:', data);
  })
  .catch(error => {
    console.error('错误:', error.message);
  })
  .finally(() => {
    console.log('请求完成，无论成功还是失败');
    // 关闭加载指示器等操作...
  });

常见的错误模式和解决方案

未捕获的Promise错误

如果Promise被拒绝但没有错误处理程序，会导致"未捕获的Promise异常"。

javascript

// 错误示例 - 没有处理错误
const badPromise = new Promise((resolve, reject) => {
  reject(new Error('未处理的错误'));
});

// 正确示例 - 添加错误处理
badPromise.catch(error => {
  console.error('处理错误:', error.message);
});

重复使用Promise

javascript

// 创建一个可重用的请求函数
function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP错误: ${response.status}`);
      }
      return response.json();
    })
    .catch(error => {
      console.error(`获取${url}失败:`, error.message);
      throw error; // 重新抛出错误，让调用者知道发生了错误
    });
}

// 使用示例
fetchData('https://api.example.com/users')
  .then(users => {
    console.log('用户数据:', users);
  })
  .catch(error => {
    // 显示用户友好的错误消息
    showErrorToUser('无法加载用户数据，请稍后再试。');
  });

高级错误处理技巧

自定义错误类

创建自定义错误类可以帮助更好地区分不同类型的错误。

javascript

class NetworkError extends Error {
  constructor(message, status) {
    super(message);
    this.name = 'NetworkError';
    this.status = status;
  }
}

class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = 'ValidationError';
    this.field = field;
  }
}

function fetchUserData(userId) {
  return fetch(`/api/users/${userId}`)
    .then(response => {
      if (!response.ok) {
        throw new NetworkError(`获取用户失败: ${response.statusText}`, response.status);
      }
      return response.json();
    })
    .then(data => {
      if (!data.name) {
        throw new ValidationError('用户名为空', 'name');
      }
      return data;
    });
}

fetchUserData(123)
  .then(user => {
    console.log('用户:', user);
  })
  .catch(error => {
    if (error instanceof NetworkError) {
      console.error(`网络错误 (${error.status}):`, error.message);
    } else if (error instanceof ValidationError) {
      console.error(`验证错误 (字段: ${error.field}):`, error.message);
    } else {
      console.error('未知错误:', error);
    }
  });

全局错误处理

对于大型应用程序，可以设置全局的未处理Promise错误捕获。

javascript

window.addEventListener('unhandledrejection', event => {
  console.error('未处理的Promise拒绝:', event.reason);
  // 可以在此处记录错误、通知用户等
  event.preventDefault(); // 防止默认处理
});

实际应用案例

案例1：用户登录流程

javascript

function login(username, password) {
  return fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username, password })
  })
  .then(response => {
    if (response.status === 401) {
      throw new Error('用户名或密码错误');
    }
    if (!response.ok) {
      throw new Error('登录服务暂时不可用');
    }
    return response.json();
  })
  .then(data => {
    // 保存用户会话
    localStorage.setItem('token', data.token);
    return data.user;
  })
  .catch(error => {
    // 记录错误并更新UI
    console.error('登录失败:', error.message);
    
    // 根据错误类型提供不同的反馈
    if (error.message === '用户名或密码错误') {
      showLoginError('用户名或密码不正确，请重试');
    } else {
      showLoginError('登录服务暂时不可用，请稍后再试');
    }
    
    // 重新抛出错误以中断Promise链
    throw error;
  });
}

// 使用示例
document.getElementById('loginForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  
  try {
    const user = await login(username, password);
    showWelcomeMessage(user.name);
    navigateToDashboard();
  } catch (error) {
    // 错误已在login函数中处理，这里不需要额外操作
  } finally {
    // 隐藏加载指示器
    hideLoadingSpinner();
  }
});

案例2：数据加载与重试机制

javascript

async function fetchWithRetry(url, options = {}, maxRetries = 3) {
  let retries = 0;
  
  while (retries < maxRetries) {
    try {
      const response = await fetch(url, options);
      
      if (!response.ok) {
        throw new Error(`HTTP错误: ${response.status}`);
      }
      
      return await response.json();
    } catch (error) {
      retries++;
      
      if (retries >= maxRetries) {
        console.error(`在${maxRetries}次尝试后放弃:`, error.message);
        throw new Error(`获取数据失败: ${error.message}`);
      }
      
      console.warn(`尝试失败（${retries}/${maxRetries}），正在重试...`);
      
      // 等待时间随重试次数增加（1秒，2秒，4秒...）
      await new Promise(r => setTimeout(r, 1000 * Math.pow(2, retries - 1)));
    }
  }
}

// 使用示例
async function loadDashboardData() {
  try {
    showLoadingIndicator();
    
    const [users, products, analytics] = await Promise.all([
      fetchWithRetry('/api/users'),
      fetchWithRetry('/api/products'),
      fetchWithRetry('/api/analytics')
    ]);
    
    updateDashboard({ users, products, analytics });
  } catch (error) {
    showErrorMessage('无法加载仪表板数据');
    console.error(error);
  } finally {
    hideLoadingIndicator();
  }
}

Promise错误处理最佳实践

1. 总是添加错误处理程序：每个Promise链的末尾都应该有.catch()处理潜在错误。

2. 返回有意义的错误：在reject()中提供详细的错误信息，而不仅仅是字符串。

3. 使用自定义错误类型：区分不同类型的错误，使错误处理更有条理。

4. 不要吞掉错误：如果在catch中处理错误后，默认隐藏了错误，调试可能会变得困难。如果需要，重新抛出错误或返回新的被拒绝的Promise。

5. 结合async/await使用try-catch：当使用async/await时，使用传统的try-catch块来处理错误。

javascript

async function getUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    
    if (!response.ok) {
      throw new Error(`HTTP错误: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(`获取用户数据失败:`, error.message);
    // 根据应用需求决定是否重新抛出错误
    throw error;
  }
}

总结

Promise错误处理是编写健壮的JavaScript异步代码的关键部分。通过正确使用.catch()、.finally()和自定义错误类，可以创建更易于维护和调试的代码，同时提供更好的用户体验。

记住以下要点：

• 总是为Promise链添加错误处理程序
• 使用适当的错误类型提供有用的错误信息
• 结合使用try-catch和async/await来简化错误处理
• 考虑实现重试机制来处理临时失败
• 设置全局错误处理程序捕获未处理的Promise异常

错误处理虽然不是最激动人心的主题，但它是区分业余代码和专业代码的重要因素之一。

练习

1. 创建一个fetchJSON函数，它接受一个URL并返回解析后的JSON。确保它能适当地处理各种错误情况。

2. 实现一个带有超时功能的Promise包装器：如果Promise在指定时间内没有解决，就拒绝它。

3. 创建一个加载数据的函数，如果失败，则从本地缓存加载数据，如果缓存也不可用，才显示错误消息。

更多资源

• MDN Web Docs: Promise
• JavaScript.info: Promises, async/await
• 你不知道的JavaScript（下卷）

通过掌握Promise错误处理，你将能够编写更可靠的异步JavaScript代码，为用户提供更好的体验。