完整的 HTTP 状态码消息获取函数
# 完整的 HTTP 状态码消息获取函数
下面是一个完整的 `getHttpMessage` 函数实现,它为所有 HTTP 状态码提供准确的消息描述:
```typescript
// utils/httpMessages.ts
/**
* HTTP 状态码消息获取函数
* @param statusCode HTTP 状态码
* @returns 对应的状态码消息描述
*/
export const getHttpMessage = (statusCode: number): string => {
// 使用映射对象获取消息,如果不存在则返回默认消息
return HTTP_STATUS_MESSAGES[statusCode as HttpStatusCode] || `未知状态码: ${statusCode}`;
};
/**
* HTTP 状态码类型
*/
export type HttpStatusCode =
| 100 | 101 | 102 | 103
| 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 226
| 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308
| 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410
| 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 421 | 422 | 423
| 424 | 425 | 426 | 428 | 429 | 431 | 451
| 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511;
/**
* HTTP 状态码对应的详细消息映射
*/
export const HTTP_STATUS_MESSAGES: Record<HttpStatusCode, string> = {
// 信息响应 (1xx)
100: '继续。客户端应继续其请求',
101: '切换协议。服务器根据客户端的请求切换协议',
102: '处理中。服务器已收到请求,但尚未完成处理',
103: '早期提示。用于在最终HTTP消息之前返回一些响应头',
// 成功响应 (2xx)
200: '请求成功',
201: '已创建。成功请求并创建了新的资源',
202: '已接受。已经接受请求,但未处理完成',
203: '非授权信息。请求成功,但返回的元信息不是在原始服务器上确定的',
204: '无内容。服务器成功处理,但未返回内容',
205: '重置内容。服务器处理成功,用户终端应重置文档视图',
206: '部分内容。服务器成功处理了部分GET请求',
207: '多状态。消息体是一个XML消息,可能包含一系列独立的响应代码',
208: '已报告。DAV绑定的成员已经在多状态响应中枚举过,不再重复',
226: 'IM已使用。服务器已经完成了对资源的GET请求,响应是当前实例应用的一个或多个实例操作的结果',
// 重定向 (3xx)
300: '多种选择。请求的资源包括多个位置,可返回一个特征列表供用户选择',
301: '永久移动。请求的资源已被永久的移动到新URI',
302: '临时移动。请求的资源临时从不同的URI响应请求',
303: '查看其它地址。请求的资源存在着另一个URI,应使用GET方法定向获取请求的资源',
304: '未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源',
305: '使用代理。所请求的资源必须通过代理访问',
306: '保留。在最新版本规范中,306状态码已经不再被使用',
307: '临时重定向。请求的资源临时从不同的URI响应请求',
308: '永久重定向。请求的资源已被永久的移动到新URI',
// 客户端错误 (4xx)
400: '请求参数错误',
401: '未授权,请重新登录',
402: '需要付款。保留,将来使用',
403: '没有权限执行此操作',
404: '请求的资源不存在',
405: '请求方法不允许',
406: '不接受。无法根据请求的内容特性完成请求',
407: '需要代理认证。与401类似,但请求者应当使用代理进行授权',
408: '请求超时。服务器等待客户端发送的请求时间过长',
409: '资源冲突。服务器处理请求时发生了冲突',
410: '资源已删除。请求的资源已被永久删除',
411: '需要有效长度。服务器无法处理客户端发送的不带Content-Length的请求信息',
412: '预处理失败。客户端请求信息的先决条件错误',
413: '请求实体过大。服务器拒绝处理当前请求,因为请求提交的实体数据大小超过了服务器能够处理的范围',
414: '请求的URI过长。请求的URI长度超过了服务器能够解释的长度',
415: '不支持的媒体类型。服务器无法处理请求附带的媒体格式',
416: '请求范围不符合要求。客户端请求的范围无效',
417: '期望失败。服务器无法满足Expect的请求头信息',
418: '我是一个茶壶。超文本咖啡壶控制协议,愚人节笑话',
421: '错误的请求。请求被指向到无法产生响应的服务器',
422: '输入数据验证失败。请求格式正确,但是由于含有语义错误,无法响应',
423: '已锁定。当前资源被锁定',
424: '依赖失败。由于之前的某个请求失败,导致当前请求失败',
425: '太早。服务器不愿意冒险处理可能重播的请求',
426: '需要升级。客户端应切换到TLS/1.0',
428: '需要先决条件。服务器要求请求包含条件',
429: '请求过于频繁,请稍后再试',
431: '请求头字段太大。服务器不愿处理请求,因为一个或多个头字段过大',
451: '因法律原因不可用。服务器由于法律原因,无法提供该资源',
// 服务器错误 (5xx)
500: '服务器内部错误',
501: '服务器不支持请求的功能,无法完成请求',
502: '错误的网关。服务器作为网关或代理,从上游服务器收到无效响应',
503: '服务暂时不可用',
504: '网关超时。服务器作为网关或代理,没有及时从上游服务器收到请求',
505: 'HTTP版本不受支持。服务器不支持请求中所用的HTTP协议版本',
506: '服务器存在内部配置错误',
507: '存储空间不足。服务器无法存储完成请求所必须的内容',
508: '检测到循环。服务器处理请求时陷入死循环',
509: '带宽限制已超过。服务器达到带宽限制',
510: '未扩展。获取资源所需的策略没有被满足',
511: '需要网络认证。客户端需要进行认证才能获得网络访问权限',
};
/**
* 检查状态码是否为错误状态码
* @param statusCode HTTP 状态码
* @returns 是否为错误状态码
*/
export const isErrorStatusCode = (statusCode: number): boolean => {
return statusCode >= 400 && statusCode < 600;
};
/**
* 检查状态码是否为客户端错误
* @param statusCode HTTP 状态码
* @returns 是否为客户端错误
*/
export const isClientError = (statusCode: number): boolean => {
return statusCode >= 400 && statusCode < 500;
};
/**
* 检查状态码是否为服务器错误
* @param statusCode HTTP 状态码
* @returns 是否为服务器错误
*/
export const isServerError = (statusCode: number): boolean => {
return statusCode >= 500 && statusCode < 600;
};
/**
* 获取状态码类别
* @param statusCode HTTP 状态码
* @returns 状态码类别
*/
export const getStatusCodeCategory = (statusCode: number): string => {
if (statusCode >= 100 && statusCode < 200) return '信息响应';
if (statusCode >= 200 && statusCode < 300) return '成功响应';
if (statusCode >= 300 && statusCode < 400) return '重定向';
if (statusCode >= 400 && statusCode < 500) return '客户端错误';
if (statusCode >= 500 && statusCode < 600) return '服务器错误';
return '未知';
};
/**
* 获取状态码的严重程度
* @param statusCode HTTP 状态码
* @returns 严重程度(info, warning, error)
*/
export const getStatusCodeSeverity = (statusCode: number): 'info' | 'warning' | 'error' => {
if (statusCode < 400) return 'info';
if (statusCode < 500) return 'warning';
return 'error';
};
/**
* 获取状态码的CSS颜色类名
* @param statusCode HTTP 状态码
* @returns CSS颜色类名
*/
export const getStatusCodeColorClass = (statusCode: number): string => {
const severity = getStatusCodeSeverity(statusCode);
switch (severity) {
case 'info': return 'text-info';
case 'warning': return 'text-warning';
case 'error': return 'text-negative';
default: return 'text-grey';
}
};
/**
* 获取状态码的Quasar图标名称
* @param statusCode HTTP 状态码
* @returns Quasar图标名称
*/
export const getStatusCodeIcon = (statusCode: number): string => {
const severity = getStatusCodeSeverity(statusCode);
switch (severity) {
case 'info': return 'info';
case 'warning': return 'warning';
case 'error': return 'error';
default: return 'help';
}
};
```
## 在错误对话框组件中使用
```typescript
// 在错误对话框组件中导入和使用
import {
getHttpMessage,
isErrorStatusCode,
getStatusCodeCategory,
getStatusCodeSeverity,
getStatusCodeColorClass,
getStatusCodeIcon
} from '@/utils/httpMessages';
// 修改错误对话框组件中的显示逻辑
const displayMessage = computed(() => {
// 使用 getHttpMessage 获取状态码对应的消息
return props.errorMessage || getHttpMessage(props.errorCode);
});
// 获取状态码类别
const statusCategory = computed(() => {
return getStatusCodeCategory(props.errorCode);
});
// 获取状态码严重程度
const statusSeverity = computed(() => {
return getStatusCodeSeverity(props.errorCode);
});
// 获取CSS颜色类名
const statusColorClass = computed(() => {
return getStatusCodeColorClass(props.errorCode);
});
// 获取图标名称
const statusIcon = computed(() => {
return getStatusCodeIcon(props.errorCode);
});
```
## 使用示例
```typescript
// 在组件中使用
import { getHttpMessage, isErrorStatusCode } from '@/utils/httpMessages';
// 显示特定状态码的消息
console.log(getHttpMessage(200)); // "请求成功"
console.log(getHttpMessage(404)); // "请求的资源不存在"
console.log(getHttpMessage(500)); // "服务器内部错误"
console.log(getHttpMessage(418)); // "我是一个茶壶。超文本咖啡壶控制协议,愚人节笑话"
// 检查状态码类型
console.log(isErrorStatusCode(200)); // false
console.log(isErrorStatusCode(404)); // true
console.log(isErrorStatusCode(500)); // true
// 在错误处理中使用
const handleApiError = (error: any) => {
if (error.response) {
const statusCode = error.response.status;
const message = getHttpMessage(statusCode);
// 显示错误对话框
showErrorDialog(statusCode, message, error.response.data);
}
};
```
## 设计特点
1. **完整覆盖**:包含了所有标准的 HTTP 状态码及其详细描述
2. **类型安全**:使用 TypeScript 类型确保代码的可靠性
3. **企业级质量**:提供了状态码分类、严重程度判断等实用功能
4. **详细描述**:每个状态码都有准确、详细的描述信息
5. **实用工具**:提供了状态码分类、错误判断、颜色类名和图标获取等辅助函数
6. **易于扩展**:模块化设计,易于添加新的状态码或修改现有描述
7. **UI 集成**:提供了与 Quasar UI 框架集成的工具函数
这个完整的 HTTP 状态码消息获取函数提供了企业级的错误消息管理功能,可以帮助您构建更加健壮和用户友好的错误处理系统。