TypeScript 中如何通过 error.response.status 捕获请求错误

安全阿岳

2026-9-26

解决方案

场景1：使用Axios发起请求

导入内置AxiosError类型，编写类型守卫函数收窄错误类型：

import type { AxiosError } from 'axios'

// 类型守卫：判断是否为Axios抛出的错误
function isAxiosError(error: unknown): error is AxiosError {
  return (error as AxiosError)?.isAxiosError === true
}

在catch块中分层判断后获取状态码：

try {
  // 你的请求业务代码
  await axios.get('/xxx/xxx')
} catch (error: unknown) {
  if (isAxiosError(error)) {
    // 已得到服务端响应的场景
    if (error.response) {
      // 这里可以直接读取status，类型完全合法
      const statusCode = error.response.status
      // 后续根据状态码做对应处理：比如401跳转登录、403提示无权限等
    } 
    // 请求已发出但无响应的场景（网络错误、服务端无响应等）
    else if (error.request) {
      console.log('网络异常，请稍后重试')
    }
    // 请求未发出的场景（配置错误、参数校验失败等）
    else {
      console.log('请求异常：', error.message)
    }
  } else {
    // 非请求相关的业务逻辑报错
    console.log('系统异常：', error)
  }
}

场景2：使用Angular HttpClient发起请求

你尝试过的HttpErrorResponse是Angular专属的错误类型，处理方式如下：

导入HttpErrorResponse类型，编写类型守卫：

import { HttpErrorResponse } from '@angular/common/http'

function isHttpErrorResponse(error: unknown): error is HttpErrorResponse {
  return error instanceof HttpErrorResponse
}

错误处理中读取状态码：

this.http.get('/xxx/xxx').subscribe({
  next: (res) => { /* 正常业务逻辑 */ },
  error: (error: unknown) => {
    if (isHttpErrorResponse(error)) {
      const statusCode = error.status
      // 后续错误处理逻辑
    }
  }
})