[AngularJS] Using AngularJS interceptors with $http

Sometimes you might need to modify HTTP requests and responses. This could be for a variety of reasons such as adding global logic handling for HTTP errors. With interceptors, you can easily accomplish this in your Angular applications.

var interceptor = function ($q, $location) {
    return {
        request: function (config) {
            console.log(config);
            return config;
        },

        response: function (result) {
            console.log(‘Repos:‘);
            result.data.splice(0, 10).forEach(function (repo) {
                console.log(repo.name);
            })
            return result;
        },

        responseError: function (rejection) {
            console.log(‘Failed with‘, rejection.status, ‘status‘);
            if (rejection.status == 403) {
                $location.url(‘/login‘);
            }

            return $q.reject(rejection);
        }
    }
};

angular.module(‘app‘, [])
    .config(function ($httpProvider) {
        $httpProvider.interceptors.push(interceptor);
    })
    .run(function ($http) {
        $http.get(‘https://api.github.com/users/bclinkinbeard/reposefw‘);
    });

In a lot of cases, interceptor can be used for Auth.

时间: 2024-10-05 05:50:18

[AngularJS] Using AngularJS interceptors with $http的相关文章

AngularJS 中利用 Interceptors 来统一处理 HTTP 的错误(reproduce)

原文:http://chensd.com/2016-03/Angular-Handle-Global-Http-Error-with-Interceptors.html?utm_source=tuicool&utm_medium=referral Web 开发中,除了数据操作之外,最频繁的就是发起和处理各种 HTTP 请求了,加上 HTTP 请求又是异步的,如果在每个请求中来单独捕获各种常规错误,处理各类自定义错误,那将会有大量的功能类似的代码,或者使用丑陋的方法在每个请求中调用某几个自定义的函

【AngularJS】AngularJS 教程

AngularJS通过新的属性和表达式扩展了HTML.------------->扩展HTML属性 AngularJS可以构建一个单页面应用程序(SPAs: Single Page Applications). AngularJS表达式 AngularJS 使用 表达式 把数据绑定到HTML. AngularJS表达式 写在双大括号内: {{ expression }}. AngularJS表达式 把数据绑定到HTML,这与ng-bind指令有异曲同工之妙. AnguarJS表达式 将在表达式书

Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma

1.下载angularjs 进入其官网下载:https://angularjs.org/?,建议下载最新版的:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js 所有版本:https://code.angularjs.org/ 2.示例1 HelloWorld ! 新建一个helloworld.html <!doctype html> <html ng-app> <head> &

[AngularJS] Using AngularJS&#39;s ngClass

.blue{ color: blue } .bold{ font-weight: bold; } .large{ font-size: 40px; } ngClass can accept an array: <div ng-claass="[blue, large, boild]">ngClass</div> ngClass can take a string: <div ng-claass="blue large boild">

AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4

1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <opti

AngularJS学习--- AngularJS中模板链接和图像 ng-src step6

接上一篇文章,本文将主要介绍angularjs中的模板链接,和图像显示? 首先,切换分支,启动项目: git checkout step-6 npm start 1.效果 相较于前一篇文章,明显感觉多了图片,那么这些图片是怎么加载进去的呢?这里图片各不一样,如果用传统的方式去加载图片可能要写很多代码,这里看一下angularjs是如何实现的?? 2.实现代码 app/index.html <ul class="phones"> <li ng-repeat="

AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step-5 #切换分支 npm start #启动项目 2.什么是XHR和依赖注入(Dependency Injection)? 1)什么是XHR? XHR是XMLHttpRequest的简称,XMLHttpRequest 用于在后台与服务器交换数据,主要是为了实现在不重新加载整个网页的情况下,对网页的某部分进行更新.简单说,浏览器中URL

【AngularJS】AngularJS整合Springmvc、Mybatis环境搭建

近期想学习AngularJS的使用,网上搜了一圈后,折腾了半天解决bug后,成功使用AngularJS整合Springmvc.Spring.Mybatis搭建了一个开发环境.(这里Spring使用的版本号是4.0.6,Mybatis版本号是3.2.5,AngularJS的版本号是1.0.3) 博客最后有源代码链接 第一步:创建一Maven项目.在pom.xml下加入须要的包 <project xmlns="http://maven.apache.org/POM/4.0.0" xm

认识 angularjs 及 angularjs 简单实用

Angular.js中,引入了专门的ViewModel(视图模型)来实现View和Model的粘合,让View和Model的进一步分离和解耦. 优势: 1.低耦合 2.可重用性 3.独立开发 4.可测试性 MVC model view controller 模型-视图-控制 数据-页面-业务处理 视图:直接用户操作的页面 模型:参与运算的所有数据(对数据进行过滤.筛选.排序.crud等操作) 控制:数据传递 angular.js的核心功能模块 1.数据的绑定 2.过滤器 3.路由 4.作用域 5