angular拦截器的使用方法

最新推荐文章于 2025-03-29 10:13:48 发布

weijun-w

最新推荐文章于 2025-03-29 10:13:48 发布

阅读量758

点赞数

CC 4.0 BY-SA版权

分类专栏：学习前端 angular 文章标签： angular 前端拦截器

本文链接：https://blog.youkuaiyun.com/qq_37705048/article/details/79926410

学习同时被 3 个专栏收录

23 篇文章

订阅专栏

前端

20 篇文章

订阅专栏

angular

8 篇文章

订阅专栏

本文介绍如何在Angular中创建自定义服务timestampMarker，用于统一处理HTTP请求和响应的时间戳标记。该服务通过拦截器实现，在请求发出时启动加载指示并记录时间戳，在响应到达时关闭加载指示并记录时间戳。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在angular自定义一个服务

angular
    .module('inspinia')    
    .factory('timestampMarker', ["$rootScope", function ($rootScope) {
        var timestampMarker = {
        request: function (config) {
        $rootScope.loading = true;
        console.log('发出请求')
        config.requestTimestamp = new Date().getTime();
        return config;
        },
        response: function (response) {
        $rootScope.loading = false;
        console.log('收到响应')
        response.config.responseTimestamp = new Date().getTime();
        return response;
        }
        };
        return timestampMarker;
    }]);

2、在config中注册这个服务，并添加到$httpProvider.interceptors

angular
    .module('inspinia')
    .config(['$stateProvider','$urlRouterProvider','$ocLazyLoadProvider','$httpProvider',
            function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider,$httpProvider) {
        $httpProvider.interceptors.push('timestampMarker');
    }])
    .run(function($rootScope, $state) {
        $rootScope.$state = $state;
    });