You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular 12 如何通过Http拦截器全局将日期对象转为指定格式字符串

Angular Http 拦截器全局转换请求体日期格式实现方案

核心实现逻辑:在拦截器中新增请求体预处理逻辑,递归遍历请求体所有属性,将Date类型值统一格式化为指定字符串,再克隆原请求替换body即可,原有权限校验、异常处理的逻辑可完全保留。

完整实现代码如下:

import { Injectable, Inject } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import * as moment from 'moment';
import { ENVIRONMENT, IEnvironment } from '你的环境变量依赖路径';

// 按实际来源调整radarWebUrl的声明/引入
declare const radarWebUrl: string;

@Injectable()
export class VerifyAuthorisationInterceptor implements HttpInterceptor {
    constructor(@Inject(ENVIRONMENT) private environment: IEnvironment) {}

    // 递归转换日期格式的工具方法
    private formatDatesInBody(body: any): any {
        // 跳过空值、非对象/数组类型
        if (body == null || typeof body !== 'object') {
            return body;
        }
        // 排除FormData、Blob等非普通JSON请求体,避免文件上传等场景出错
        if (body instanceof FormData || body instanceof Blob || body instanceof ArrayBuffer) {
            return body;
        }
        // 处理数组类型
        if (Array.isArray(body)) {
            return body.map(item => this.formatDatesInBody(item));
        }
        // 处理普通对象
        const formattedBody = { ...body };
        for (const key of Object.keys(formattedBody)) {
            const value = formattedBody[key];
            if (value instanceof Date) {
                // 可按需调整日期格式
                formattedBody[key] = moment(value).format('YYYY-MM-DD HH:mm:ss');
            } else if (typeof value === 'object') {
                // 递归处理嵌套对象/数组
                formattedBody[key] = this.formatDatesInBody(value);
            }
        }
        return formattedBody;
    }

    intercept(
        request: HttpRequest<unknown>,
        next: HttpHandler
    ): Observable<HttpEvent<unknown>> {
        // 预处理请求体,替换为转换后的新body
        const processedRequest = request.clone({
            body: this.formatDatesInBody(request.body)
        });

        // 保留原有响应处理、异常捕获逻辑
        return next.handle(processedRequest).pipe(
            map((event: HttpEvent<unknown>) => {
                return event;
            }),
            catchError((error: HttpErrorResponse) => {
                if (error.status === 401 && error.statusText === 'Unauthorized') {
                    const returnUrl = window.location.href;
                    window.location.href = radarWebUrl;
                }
                return throwError(error);
            })
        );
    }
}

注意事项

  • 如果存在不需要转换日期的接口,可在预处理前通过请求URL前缀、请求方法等规则跳过处理
  • 日期格式化逻辑可按需调整,若不用moment,替换为dayjs或原生Date格式化方法即可
  • 若需要排除指定日期字段的转换,可在递归方法中新增字段名判断逻辑

内容的提问来源于stack exchange,提问作者Mukil Deepthi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.02 15:09:03