如何使用AngularJS在Service中调用$http.get()

qc6wkl3g  于 2023-09-30  发布在  Angular
关注(0)|答案(3)|浏览(162)

我想在控制器中注入服务。服务将返回$http.get()方法。
错误:[$injector:unpr] http://errors.angularjs.org/1.6.4/ $injector/unpr?p0=JsonFilterProvider%20%3C-%20JsonFilter
请指出我的代码中有什么错误?

<script>
        var app = angular.module("myApp", []);
        app.controller("myCntlr", ['$scope', 'myhttpService', function ($scope,  myhttpService) {

                $scope.myHttpMessage = myhttpService.httpGetService();
            }]);

 app.service("myhttpService", ['$http', '$scope', function ($http, $scope) {

            this.httpGetService = function () {
                console.log("httGetService");
               $http.get('https://reqres.in/api/users').then(function (successResponse) {
                    console.log("http Get");
                    return successResponse;

                }, function (errorResponse) {
                    console.log("http Get Error");
                    return errorResponse
                });
            };

    }]);

</script>

 <div ng-app="myApp" ng-controller="myCntlr">

        <p>Http Message:{{myHttpMessage|Json}}</p>

</div>
dgenwo3n

dgenwo3n1#

您不能在服务中注入$scope。那是不允许的。相反,您可以从服务和控制器内部的进程返回promise,类似于这样。

app.service("myhttpService",['$http', function ($http) {
    this.httpGetService = function () {
       return $http.get('https://reqres.in/api/users');
    }
}]);

app.controller("myCntlr", ['$scope', 'myhttpService', function ($scope,  myhttpService) {
  myhttpService.httpGetService().then(function(response){
     $scope.myHttpMessage = response.data;
  }, function(error){
     //do something on failure
  });
}]);
c8ib6hqw

c8ib6hqw2#

真正的问题是你没有得到你的服务的响应。所以JSON过滤器抛出一个错误

<p>Http Message:{{myHttpMessage | json}}</p>

确保使用return命令从服务返回结果。

return  $http.get('https://reqres.in/api/users').then(function (successResponse)
yacmzcpb

yacmzcpb3#

<!DOCTYPE html>
  <html>
 <head>
 <script  src="https:/ 
/ajax.googleapis. 
 com/ajax/libs/ang 
 ularjs/1.8.2/angular. 
 min.js"></script>
 </head>
 <body>
 <a href="/restapi/getfile? 
 code=jdndndnd&attachment=true" 
 id="downloadLink">download</a>

  <script> document.  getElementById(. 
 'downloadLink'). 
 .addEventListener('click', 
 function(event) {
        event.preventDefault(); // 
  Отменить стандартное действие.    
  перехода по ссылке

        // Создать XMLHttpRequest для 
  отправки запроса
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 
 this.getAttribute('href'), true);

        // Установить заголовки
        
  xhr.setRequestHeader('Authorization', 
 'Bearer your-access-token');
        xhr.setRequestHeader('Custom- 
  Header', 'custom-value');

        xhr.responseType = 
 'arraybuffer';

        xhr.onload = function() {
            if (xhr.status === 200) {
                var blob = new 
  Blob([xhr.response], { type: 
 'application/pdf' });
                var url = 
 window.URL.createObjectURL(blob);

          // Создать ссылку для 
 скачивания файла
                var a = 
 document.createElement('a');
                a.href = url;
                a.download = 
 'downloaded-file.pdf';
                
 document.body.appendChild(a);
                a.click();

                // Очистить ссылку 
 после скачивания
                
 window.URL.revokeObjectURL(url);
            } else {
                console.error('Ошибка 
  при загрузке файла:', 
  xhr.statusText);
            }
        };

        xhr.send();
    });
  </script>
 </body>
  </html>
  **strong text**

相关问题