بررسی سرویس $http در فریم ورک AngularJS

بررسی سرویس $http در فریم ورک AngularJS

در این پست از وبسایت پرووید، در رابطه با بررسی سرویس $http در فریم ورک AngularJS صحبت خواهیم کرد. به ادامه ی مطلب بروید.

در این قسمت از آموزش از وب سایت پرووید قصد داریم در رابطه با $http به عنوان یک سرویس در AngularJS استفاده کنیم. به طور ساده $http به منظور ارسال و دریافت داده ها از یک سرور با استفاده از XMLHttpRequest مربوط به مرورگر و یا JSONP مورد استفاده قرار میگیرد.

بسته ی آموزش ویدئویی شروع به کار با Angular 2

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی شروع به کار با Angular 2 دیدن کنید.

در AngularJS سرویس $http به عنوان یک Object پیاده سازی شده و شامل Method هایی است که در قسمت زیر مشاهده می کنید.

در ادامه بیایید نگاهی به مهم ترین Method های مربوط به $http بیاندازیم.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core دیدن کنید.

بررسی $http.get()

متد $http.get() به منظور ارسال یک HTTP GET Request به یک سرور و بازیابی داده ها مورد استفاده قرار میگیرد.

کد زیر مربوط Method Signature مربوط به این Method است.

HttpPromise $http.get(url)

با استفاده از متد $http.get() می توانید یک Object از نوع HttpPromise را به دست بیاورید. این Object به نوبه خود دارای Method هایی است که به منظور پردازش کردن Response دریافت شده مورد استفاده قرار میگیرند. کدی که در مثال زیر می بینید نحوه استفاده از سرویس $http را در درون یک Controller به منظور ارسال یک HTTP GET Request به تصویر کشیده است.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app ="myApp">
    <div>
        <div ng-controller="myController">
           Response Data: {{data}} <br />
           Error: {{error}}
        </div>
    </div>
    <script>
        var myApp = angular.module('myApp', []);

        myApp.controller("myController", function ($scope, $http) {
       
            var onSuccess = function (data, status, headers, config) {
                $scope.data = data;
            };

            var onError = function (data, status, headers, config) {
                $scope.error = status;
            }
        
            var promise = $http.get("/demo/getdata");
                
            promise.success(onSuccess);
            promise.error(onError);
         
        });
    </script>
</body>
</html>

در مثال بالا myController به عنوان یک Controller دارای یک پارامتر ورودی از نوع $http است که با استفاده از آن می تواند HTTP GET Request هایی را ارسال کند. در زمان Runtime فریم ورک AngularJS به صورت خودکار $scope را به عنوان پارامتر ورودی به درون این Controller تزریق خواهد کرد. در رابطه با تزریق وابستگی توصیه می کنیم که از آموزش اصل Inversion of Control در برنامه نویسی و همچنین بسته ی آموزش ویدئویی Inversion of Control و IoC Container ها استفاده کنید.

متد  $http.get()  یک HttpPromise را Return می کند که با استفاده از Method هایی از قبیل success() و error() می توانیم Response دریافت شده را پردازش کنیم.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core دیدن کنید.

برای مثال متد success() به منظور Register کردن یک Callback Method مورد استفاده قرار میگیرد که زمانی که یک Request به صورت موفقیت آمیز کامل شود، آن Method اجرا خواهد شد. به همین ترتیب متد error() به منظور Register کردن یک Callback Method مورد استفاده قرار می گیرد که این Callback Method در زمان شکست خوردن یک Request و Return شدن یک error اجرا می شود.

Method ی که در قسمت بالا به عنوان onSuccess() تعریف کرده ایم اقدام به Attach کردن Response Data به $scope می کند. علاوه بر این متد onError() اقدام به Attach کردن پروپرتی status به $scope می کند. این Method ها می توانند به صورت زنجیره ای مورد استفاده قرار بگیرند. این موضوع در کد زیر نشان داده شده است.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app ="myApp">
    <div>
        <div ng-controller="myController">
           Response Data: {{data}} <br />
           Error: {{error}}
        </div>
    </div>
    <script>
        var myApp = angular.module('myApp', []);
    
        myApp.controller("myController", function ($scope, $http) {
       
            var onSuccess = function (data, status, headers, config) {
                $scope.data = data;
            };

            var onError = function (data, status, headers, config) {
                $scope.error = status;
            }
        
            var promise = $http.get("/demo/getdata").success(onSuccess).error(onError);
         
        });
    </script>
</body>
</html>

بررسی متد  $http.post

همان طور که از نام این Method مشخص است با استفاده از $http.post می توانید یک Http POST Request را به یک سرور ارسال کرده و داده های مورد نظرتان را به آن سرور Submit کنید.

Method Signature مربوط به $http.post شبیه به کد زیر می باشد.

HttpPromise $http.post(url, dataToSubmit);

کدی که در قسمت زیر مشاهده می کنید نحوه استفاده از این Method را نشان می دهد.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        Response Data: {{data}} <br />
        Error: {{error}}
    </div>
    <script>
        var myApp = angular.module('myApp', []);
    
        myApp.controller("myController", function ($scope, $http) {
       
            var onSuccess = function (data, status, headers, config) {
                $scope.data = data;
            };

            var onError = function (data, status, headers, config) {
                $scope.error = status;
            }
        
            $http.post('/demo/submitData', { myData: 'Hello World!' })
                 .success(onSuccess)
                 .error(onError);
         
        });
    </script>
</body>
</html>

بررسی متد $http()

می توانید از یک تابع سازنده و یا همان Constructor سرویس $http به منظور ارسال Http Request ها شبیه به کد زیر استفاده کنید.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
            Response Data: {{data}} <br />
        Error: {{error}}
        
    </div>
    <script>
       var myApp = angular.module('myApp', []);
    
        myApp.controller("myController", function ($scope, $http) {
       
            var onSuccess = function (data, status, headers, config) {
                $scope.data = data;
            };

            var onError = function (data, status, headers, config) {
                $scope.error = status;
            }
        
           var getReq = {
                    method: 'GET',
                    url: '/demo/getdata'
                };
            
            $http(getReq).success(onSuccess).error(onError);

            var postReq = {
                    method: 'POST',
                    url: '/demo/submitData',
                    data: { myData: 'test data' }
                };

            $http(postReq).success(onSuccess).error(onError);
         
        });
    </script>

</body>
</html>

تا به اینجای کار توانستیم بفهمیم که با استفاده از $http به عنوان یک سرویس می توانیم AJAX Request هایی را به یک سرور ارسال کنیم.

در قسمت بعدی از این آموزش در رابطه با سرویس $log صحبت خواهیم کرد.

امیدواریم که این آموزش از وبسایت پرووید نیز مورد توجه تمامی دوستان عزیز قرار گرفته باشد. از شما دعوت می‌کنیم که از دیگر آموزش های ما در رابطه با فریم ورک Angular استفاده کنید. لیست کامل این آموزش ها را می توانید در پست مربوط به آموزش کامل برنامه نویسی تحت وب با Angular مشاهده کنید.

مرتضی گیتی
بدون نظر

ارسال نظر

نظر
نام
ایمیل
وب سایت