面试题：TypeScript 封装 RESTful API 客户端时如何处理不同 HTTP 状态码

Question

假设你正在用 TypeScript 封装一个 RESTful API 客户端，在发送请求后，如何针对不同的 HTTP 状态码（如 200、400、500 等）进行相应的处理？请写出关键的代码片段，并说明如何设计错误处理机制，让调用者能方便地捕获和处理异常。

Answer 1

1. 关键代码片段：
   • 首先，使用 fetch 来发送请求，假设我们有一个简单的 httpRequest 函数：

   async function httpRequest(url: string, options: RequestInit = {}): Promise<any> {
       const response = await fetch(url, options);
       if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
       }
       return response.json();
   }
   

   • 调用这个函数并处理不同状态码：

   httpRequest('/api/some - endpoint', { method: 'GET' })
      .then(data => {
           // 处理状态码200等成功情况
           console.log('成功响应:', data);
       })
      .catch(error => {
           const statusMatch = (error.message as string).match(/status: (\d+)/);
           if (statusMatch) {
               const statusCode = parseInt(statusMatch[1]);
               if (statusCode >= 400 && statusCode < 500) {
                   // 处理400系列错误
                   console.error('客户端错误:', error.message);
               } else if (statusCode >= 500) {
                   // 处理500系列错误
                   console.error('服务器端错误:', error.message);
               }
           } else {
               console.error('其他错误:', error.message);
           }
       });
   

2. 错误处理机制设计：
   • 抛出错误：在 httpRequest 函数中，当 response.ok 为 false 时，抛出一个包含状态码信息的错误。这样可以统一捕获所有非成功状态码的情况。
   • 调用者捕获：调用者在 catch 块中捕获这个错误。通过正则表达式从错误信息中提取状态码，然后根据状态码范围进行不同类型错误的处理。这种方式使得调用者可以方便地针对不同的异常情况进行定制化处理，例如显示特定的错误提示给用户，或者进行重试操作等。同时，对于非预期的错误（无法提取状态码的情况），也有通用的处理逻辑。