AngularJS中$http、$httpProvider、$resource操作笔记

c方法是自定义一个日志输出方法;function c(str){console.log(str)};

设置httpProvider头

默认的请求头保存在 $httpProvider.defaults.headers.common 对象中;

var app = angular.module("Myapp", ['ngRoute'])
        .config(['$locationProvider','apikey',function($locationProvider,apikey){
            $locationProvider.html5Mode(false);
            $locationProvider.hashPrefix("!")
        }])
        .config(function ($routeProvider,$httpProvider) {
            //设置http头
            $httpProvider.defaults.headers.common["X-Response-Code-By"] = "Angular1.3.8";

            //路由
            $routeProvider
                    .when('/', {
                        templateUrl: 'views/main.html',
                        controller: 'MainCtrl'
                    })
                    .when('/about', {
                        templateUrl: 'views/about.html',
                        controller: 'AboutCtrl',

                    })
                    .when('/action', {
                        templateUrl: 'views/action.html',
                        controller: 'ActionCtrl'
                    })
                    .when('/contact:q', {
                        templateUrl: 'views/contact.html',
                        controller: 'ContactCtrl'
                    }).when("/register", {
                        templateUrl: 'views/register.html',
                        controller: 'registerCtrl'
                    })
                    .otherwise({
                        redirectTo: '/'
                    })
        })

$http服务操作:

可以包含以下键:
1. method (字符串)
这个键是我们希望发送的请求的HTTP方法。它的值是下列各项其中之一:‘GET’、‘DELETE’、‘HEAD’、‘JSONP’、‘POST’、‘PUT’。
2. url (字符串)
绝对或相对的URL,是请求的目标。
3. params (字符串 map 或对象)
这个键的值是一个字符串 map 或对象,会被转换成查询字符串追加在URL后面。如果值不是字符串,会被JSON序列化。
// 参数会转化为?name=ari的形式

$http({
    params: {'name': 'ari'}
})

4. data (字符串或对象)
这个对象中包含了将会被当作消息体发送给服务器的数据。通常在发送POST请求时使用。从AngularJS 1.3开始,它还可以在POST请求里发送二进制数据。要发送一个 blob 对象,你可以简单地通过使用 data 参数来传递它。例如:

var blob = new Blob(['Hello World'], {type: 'text/plain'});
$http({
    method: 'POST',
    url: '/',
    data: blob
});

5. headers (对象)
一个列表,每一个元素都是一个函数,它会返回代表随请求发送的HTTP头。如果函数的返回值是 null ,对应的头不会被发送。
6. xsrfHeaderName (字符串)
保存XSFR令牌的HTTP头的名称。
7. xsrfCookieName (字符串)
保存XSFR令牌的cookie的名称。
8. transformRequest (函数或函数数组)
这是一个函数或函数数组,用来对HTTP请求的请求体和头信息进行转换,并返回转换后的版本。通常用于在请求发送给服务器之前对其进行序列化。这个函数看起来是这样的:

function(data,headers) {}

9. transformResponse (函数或函数数组)
这是一个函数或函数数组,用来对HTTP响应的响应体和头信息进行转换,并返回转换后的版本。通常用来进行反序列化。这个函数看起来是这样的:

function(data,headers) {}

10. cache (布尔型或缓存对象)
如果 cache 属性被设置为 true ,那么AngularJS会用默认的 $http 缓存来对GET请求进行缓存。如果 cache 属性被设置为一个 $cacheFactory 对象的实例,那么这个对象会被用来对GET请求进
行缓存。
11. timeout (数值型或promise对象)
如果 timeout 被设置为一个数值,那么请求将会在推迟 timeout 指定的毫秒数后再发送。如果被设置为一个promise对象,那么当该promise对象被resolve时请求会被中止。
12. withCredentials (布尔型)
如果该属性被设置为 true ,那么XHR请求对象中会设置 withCredentials 标记。默认情况下,CORS请求不会发送cookie,而 withCredentials 标记会在请求中加入Access-Control-Allow-Credentials头,这样请求就会将目标域的cookie包含在请求中。
13. responseType (字符串)
responseType 选项会在请求中设置 XMLHttpRequestResponseType 属性。我们可以使用以下HTTP请求类型其中之一:

  •  “” (字符串,默认);
  • “arraybuffer” ( ArrayBuffer );
  • “blob” ( blob 对象);
  • “document” (HTTP文档);
  • “json” (从JSON对象解析而来的JSON字符串);
  • “text” (字符串);
  • “moz-blob” (Firefox的接收进度事件);
  • “moz-chunked-text” (文本流);
  • “moz-chunked-arraybuffer” ( ArrayBuffer 流)。

15.3 响应对象
AngularJS传递给 then() 方法的响应对象包含四个属性。

  • data (字符串或对象)这个数据代表转换过后的响应体(如果定义了转换的话)。
  • status (数值型)响应的HTTP状态码。
  • headers (函数)这个函数是头信息的getter函数,可以接受一个参数,用来获取对应名字的值。例如,用如下代码获取 X-Auth-ID 的值:
    • $http({
          method: 'GET',
          url: '/api/users.json'
      }).then (resp) {
           // 读取X-Auth-ID
          resp.headers('X-Auth-ID');
      });
  • config (对象)这个对象是用来生成原始请求的完整设置对象。
  • statusText (字符串)这个字符串是响应的HTTP状态文本。

以下是笔记代码:

//ajax服务
.factory('ajax',function($http){
    return {
        http:function(url,param,method){
            return $http({
                method:method,
                url:url,
                params:param
            })
        },
        save:function(url,param){
            return $http.post(url,param);
        },
        get:function(url,param){
            return $http.get(this.parseParam(url,param));
        },
        put:function(url,param){
            return $http.put(url,param);
        },
        delete:function(url){
            return $http.delete(url);
        },
        remove:function(url){
            return $http.delete(url);
        },
        parseParam:function(url,param){
            if(Object.keys(param).length > 0){
                var p = "";
                for(key in param){
                    p += key + "=" + param[key] + "&"
                }
                p = p.substr(0, p.length - 1);

                if(p.length > 0){
                    if(url.indexOf('?') != -1){
                        url += "&" + p;
                    }else{
                        url += "?" + p;
                    }
                }
            }
            return url;
        }
    }
})
.controller('AboutCtrl', function ($scope, $routeParams, $filter,ajax,resource) {
    $scope.context = "关于我们";
    $scope.other = "谢谢支持!";

    $scope.click = function () {
        ajax.http("/api/v1/",{a:1,t:'http',user_name:'002',user_pwd:'002003'},'post')
                .success(function(data,staus,headers){
                    c(data);
                    if(staus == 200){
                        // c("http:成功")
                    }

                }).error(function(data,staus,headers){
                    c(data);
                });

        ajax.get("/api/v1/init/20",{a:20,t:'get'})
                .success(function(data,staus,headers){
                    c(data);
                    if(staus == 200){
                        //c("get:成功")
                    }
                })
                .error(function(data,staus,headers){
                    c(data);
                });

        ajax.save("/api/v1/init",{a:30,user_name:'a001',user_pwd:'a1234567890',t:'save'})
                .success(function(data,staus,headers){
                    c(data)
                    if(staus == 200){
                        // c("save:成功")
                    }
                })
                .error(function(data,staus,headers){
                    c(data);
                });
        ajax.put("/api/v1/init/40",{a:40,user_name:'a001',user_pwad:'123456bbb',t:'put'})
                .success(function(data,staus,headers){
                    c(data);
                    if(staus == 200){
                        // c("put:成功")
                    }
                })
                .error(function(data,staus,headers){
                    //c("put:失败")
                });
        ajax.delete("/api/v1/init/50",{a:50,t:'del'})
                .success(function(data,staus,headers){
                    c(data);
                    if(staus == 200){
                        // c("delete:成功")
                    }
                })
                .error(function(data,staus,headers){
                    //c("put:失败")
                });
        ajax.remove("/api/v1/init/60",{a:60,t:'remove'})
                .success(function(data,staus,headers){
                    c(data);
                    if(staus == 200){
                        //c("remove:成功")
                    }
                })
                .error(function(data,staus,headers){
                    //c("put:失败")
                });

    };

$resource资源

AngularJS还提供另外一个非常有用的可选服务 $resource 供我们使用。这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了,$resource依赖于$http。
$resource 服务难以置信地方便,它对很多复杂的细节进行了抽象,只留下同后端服务器进行真正有意义的交互,前提是服务器支持RESTful的数据模型。
$resource 服务可以将 $http 请求转换成 save 和 update 等简单形式。我们可以通过 $resource服务来处理复杂的细节,而无需自己编写重复和繁琐的业务代码。

服务代码:

/* resource资源依赖$http
 resource.get("/1.php?type=resource&act=get",{a:11}).do(function(data){
    c(data)//成功返回后的数据
 },function(err){
    c(err)//失败返回的数据
 });
 */

.factory('resource',function($resource){
    return {
        /**
         * get请求
         * @param url 请求地址
         * @param param 参数{} js对象
         * @returns {*}
         */
        get:function(url,param){
            return $resource(url,param,{
                do:{
                    method:'GET'
                }
            });
        },
        save:function(url,param){
            return $resource(url,param,{
                do:{
                    method:'POST'
                }
            });
        },
        put:function(url,param){
            return $resource(url,param,{
                do:{
                    method:'PUT'
                }
            });
        },
        delete:function(url,param){
            return $resource(url,param,{
                do:{
                    method:'DELETE'
                }
            });
        },
        remove:function(url,param){
            return $resource(url,param,{
                do:{
                    method:'DELETE'
                }
            });
        },
        other:function(url,param,method){
            return $resource(url,param,{
                do:{
                    method:method,
                }
            });
        }
    }
})

 

以下是联系操作代码:

.controller('AboutCtrl', function ($scope, $routeParams, $filter,ajax,resource) {
    $scope.context = "关于我们";
    $scope.other = "谢谢支持!";

    $scope.click2 = function(){
        resource.get("/api/v1/user/10",{a:11,t:'get'}).do(function(data){
            c(data)
        },function(err){
            c(err)
        })

        resource.save("api/v1/user/",{a:21,t:'save',user_name:'0021',user_pwd:'00200321'}).do(function(data){
            c(data)
        },function(err){
            c(err)
        })

        resource.delete("api/v1/user/31",{a:31,t:'del'}).do(function(data){
            c(data)
        },function(err){
            c(err)
        })

        resource.remove("api/v1/user/41",{a:41,t:'remove'}).do(function(data){
            c(data)
        },function(err){
            c(err)
        })

        resource.other("api/v1/user/",{a:41,t:'other'},'get').do(function(data){
            c(data)
        },function(err){
            c(err)
        })

        resource.put("api/v1/user/51",{a:51,t:'put',user_name:'0051',user_pwd:'00200351'}).do(function(data){
            c(data)
        },function(err){
            c(err)
        })



    };

Leave a Comment