Angular（四）内置服务$http

最新推荐文章于 2023-02-13 17:12:45 发布

原创最新推荐文章于 2023-02-13 17:12:45 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

18 篇文章

订阅专栏

angular

5 篇文章

订阅专栏

本文介绍了AngularJS中$http服务的使用方法，包括基于HTTP的服务请求、Promise的封装及回调处理方式。此外还详细讲解了如何利用$http拦截器对请求和响应数据进行统一处理。

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

$http服务是angula对ajax进行封装后的方法，它基于$ q服务，提供了Promise封装，几首一个配置对象作为参数，并返回一个promise对象，同时还提供了两个方法来定义promise回调（success和error）。

$http

$http({
    method: 'GET',
    url: '/targetUrl'
}).success(function(data) {
      console.log(data;)})
.error(function(err) {
      console.log(err)});

由于$http返回的是一个promise对象，所以在方法末尾可以用then来执行一些后续操作

var promise = $http({...}).then(function(result) {
    console.log(result.data);
});

$http有许多个方法：

$http.get()
$http.post()
$http.jsonp()
…

$http.get(url,options);

$http.get('/target',{
    cache: true
}).success(function(data) {...})
//data是一个object，只有数据部分，不包含状态码信息
  .error(function(err) {...})

二、$http拦截器

$http拦截器即在数据返回客户端之前对其进行一些统一的处理。
$http拦截器对数据的预处理有：
+ 对每条请求发送到server之前进行预处理（如加入token）
+ 或者在server返回数据到达客户端还未被处理之前，进行预处理（如将数据格式化）
+ 对请求和响应过程发生的问题进行捕获处理

$http拦截器是通过 \$httpProvider.interceptors 数组定义的一组拦截器，每个拦截器都是实现了特定功能的一个factpory
\$http有四个可选方法来实现不同时期对数据的处理功能

angular.factory('myInterceptor',function($q) {
    return {
    //request：可选；拦截成功的请求
        request: function(config) {
            return config || $q.when(config);
            //$q.when()：将第三方的promise封装成AngularJS的$q.promise
        }，
    //requestError：可选，拦截失败的请求
        requestError： function（err） {...},
    //response：可选，拦截成功的响应
        respponse: function(res) {...},
    //responseError：可选，拦截失败的响应
        responseError: function(err) {...}
    }
})

定义好拦截器之后，将其加入到$httpProvider.interceptors数组中（一般在config中进行）

angular.module('myApp',[])
.config(function($httpProvider) {
    $httpProvider.interceptors.push(myInterceptor);
});

参考文章：AngularJs(四)：$Http,$resource