185800****0分享是一种美德

Blog

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

十月 9th, 2016 5.互联网应用开发, 6.前端开发
Leave a comment

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)
        })



    };
Tags:
Posted by
Alan
既然生，就生如夏花之绚烂；淡然死，却死若秋叶之静美！
Alan has posted 570 articles

Leave a Comment

 
Copyright © 2008-2021 lanxinbase.com Rights Reserved. | 粤ICP备14086738号-3 |