处理$ http响应angularjs - 无法在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"));

问题是，我无法获取对象中的链接。

如果我仅通过response.data更改response.data.message，这就是我得到

的原因

当我在返回之前添加console.log（response.data）时，这就是我得到的：

如果我尝试JSON.parse（response.data），我得到了这个：

你知道怎么做吗？

感谢您的帮助

Answer 1

您在控制台中看到的是承诺本身。 如果你想查看值（在这种情况下将是url），那么就像这样做

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

如果要查看响应数据，则需要在then()回调中添加console.log（）。 这样做：

.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) {
  	var demoService = {};

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

	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>

使用promise deffer object

参考 - https://docs.angularjs.org/api/ng/service/ $ q

JS小提琴工作代码 - https://jsfiddle.net/Shubhamtri/9y9ezkdt/1/