$htttp内置服务

最新推荐文章于 2022-03-20 23:59:50 发布

learning_ever

最新推荐文章于 2022-03-20 23:59:50 发布

阅读量834

点赞数

分类专栏：前端，框架文章标签： angularjs 内置服务器 http 异步函数

本文链接：https://blog.csdn.net/learning_ever/article/details/71104289

版权

前端，框架专栏收录该内容

11 篇文章 0 订阅

订阅专栏

AngularJS给我们提供了大量的内置服务，通过这些内置服务就可以快捷的进行一些业务功能流程的自动处理了。

AngularJS的内置服务有：

$window用于注入原生JS中的window对象

$document用于注入原生JS中的document文档对象

$timeout用于注入封装的原生JS中的setTimeout()函数处理过程

$interval用于注入封装的原生JS中的setInterval()函数处理过程

$location用于注入原生JS中的location对象方便对于URL地址等操作

$http用于注入封装的Ajax操作进行异步数据请求等等

今天说说我对于$http内置服务的理解：

$http服务是AngularJS的核心服务之一，这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程服务的数据请求！

其语法为：

$http({
       
   
   
    
    	method:”GET”,/* 请求发送方式 */
    
    	url:url /* 请求地址*/
   
   

	}).then(
         	function success(res) {
            	 // 成功处理函数
      		},
       		function error(res) {
             	// 请求失败处理函数
       		}
)

AngularJS为了方便开发人员进行快捷的异步数据请求的处理，提供了一系列的快捷函数方便开发，主要由如下的函数：

$http.get()

$http.post()

$http.jsonp()

$http.header()

$http.patch()

$http.put()

$http.delete()

$http.get(“url”).then(fn1, fn2);

在常规项目开发时，使用较多的是原始的内置服务$http的$http({}).then(fn1, fn2)函数进行异步数据处理。

我们通过登陆的实例来更加深刻的了解$http内置服务：

<!--html代码-->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div class="form" ng-controller="myCtrl">
    用户名:<input type="text" ng-model="username"><br/>
    密码：<input type="text" ng-model="password"><br/>
    <button ng-click="loginFn()">登陆</button>
</div>
</body>
</html>

<!--js代码-->

<script>
    var app = angular.module("myApp",[]);

    app.controller("myCtrl",["$scope","$http",function($scope,$http){
        $scope.loginFn = function(){
            $http({
                method:"GET",
                url:"http://datainfo.duapp.com/shopdata/userinfo.php",//登陆端口
                params:{
                    status:"login",
                    userID:$scope.username,
                    password:$scope.password
                }
            }).then(function success(resp){
                    console.log("请求成功",resp);
                if(resp.data instanceof Object){ //判断是否是对象
                    console.log("登陆成功，跳转首页！");
                }else{
                    console.log("登录失败");
                }
            },function error(resp){
                    console.log("请求失败");
            })
        }
    }])
</script>

js代码中，我们用$http内置服务来实现登陆的功能。

注：

method：如果是“GET”的方式，我们使用params来传递参数
如果是Post请求，我们使用data来尝试传递参数。

learning_ever

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
$htttp内置服务

AngularJS给我们提供了大量的内置服务，通过这些内置服务就可以快捷的进行一些业务功能流程的自动处理了。AngularJS的内置服务有：$window用于注入原生JS中的window对象$document用于注入原生JS中的document文档对象$timeout用于注入封装的原生JS中的setTimeout()函数处理过程$interval用于注入封装的原生J
复制链接

扫一扫