handle $ http 응답 anglejs - console.log에서 값을 가져올 수 없습니다.

Question

api를 사용하여 개가 이미지 링크를 가져 오는 데 내 컨트롤러를 사용하고 싶지만 결과를 사용할 수 없습니다.

var images = function(breed) { 

    var promise = $http({ 
    method: 'GET', 
    url: 'https://dog.ceo/api/breed/' + breed + '/images/random' 
    }) 
    .then(function successCallback(response) { 
    return response.data.message; 
    }, 
    function errorCallback(response) { 

    }); 
    return promise; 
} 

console.log(images("kelpie")); 

문제는 내가 개체에서 링크를 가져올 수 없습니다. 나는 전에을 console.log (response.data)를 추가 할 때 내가

을받을 이유

난 단지 response.data에 의해 response.data.message을 변경하는 경우,이입니다 이것이 내가 무엇을 얻을 반환 :

나는 JSON.parse (response.data)을 시도 할 경우, I 이있어 :

를 어떻게 할 지 알고 있나요?

도움 주셔서 감사합니다.

Answer 1

콘솔에 표시되는 내용은 약속 자체입니다. (이 경우 URL을 것입니다) 값을 보려는 경우 다음 응답 데이터를보고 싶은 경우에) (당신이 CONSOLE.LOG를 추가해야이

console.log(images("kelpie").value); 

처럼 할 then() 콜백. 이처럼 수행

.then(function successCallback(response) { 
    console.log(response.data.message); 
    return response.data.message; 
    } 

Answer 2

당신이 JSON.parse (response.data)와 하나를 시도하고 그것에서 메시지 속성을 가져올 수 있습니다.

Answer 3

여기서 약속을 활용해야합니다. 이 작업을 수행하는 한 가지 방법입니다 -

angular.module('demo', []) 
 
    .controller('myController', ['$scope', 'demoService', function($scope, demoService){ 
 
    demoService.test().then(function(response) { 
 
     $scope.url = response; 
 
    }) 
 
    }]) 
 
    .factory('demoService', ['$http', '$q', 
 
    function($http, $q) { 
 
    \t var demoService = {}; 
 

 
\t demoService.test = function() { 
 
\t \t var deferred = $q.defer(); 
 
\t \t $http.get('https://jsonplaceholder.typicode.com/posts/1').then(
 
    function(response) { 
 
      response = "https://www.w3schools.com/bootstrap/paris.jpg"; 
 
\t \t \t \t \t deferred.resolve(response); 
 
\t \t \t \t }, function(error) { 
 
\t \t \t \t \t console.log("some error occur"); 
 
\t \t \t \t \t console.log(error); 
 
\t \t \t \t \t deferred.reject(error); 
 
\t \t \t \t } 
 
\t \t) 
 
\t \t return deferred.promise; 
 
\t } 
 

 
\t return demoService; 
 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demo" ng-controller="myController"> 
 
    <img ng-src="{{url}}" /> 
 
</div>

사용 약속 deffer 객체

Refference - https://docs.angularjs.org/api/ng/service/ $ q를

JS 바이올린 작업 코드 - https://jsfiddle.net/Shubhamtri/9y9ezkdt/1/