无法在 AngularJS 视图中显示 ES6 承诺值 [英] Can't get ES6 promise value to display in AngularJS view

问题描述

我正在尝试使用 Pinterest JavaScript SDK 来获取项目的一些 pin 数据.我在我创建的 Pinterest 服务中有一个方法，该方法在我的 HomeController 中被调用.我尝试将响应放入 promise 中，这样我就可以将它放在 HomeController 的 $scope 上并在我的视图中显示它.但是，在我看来， $scope.pins 是未定义的.为什么它是undefined?似乎承诺正在发挥作用.仍在学习承诺.

Pinterest 服务

function getBoardPins (id) {返回新的承诺(函数(解决，拒绝){PDK.request('/v1/boards/' + id + '/pins/', 'GET', {fields: 'id,link,url,creator,board,created_at,note,color,counts,media,attribution,图像，元数据'}，功能(响应){如果(响应){解决(响应)；}拒绝();});});}

家庭控制器

Pinterest.getBoardPins('490329546869188172').then(function (response) {$scope.pins = response.data;});

查看

Pinterest
<div ng-repeat="pin in pin"><div>{{pin}}</div>

解决方案

使用 $q.when 将 ES6 承诺转换为 AngularJS 承诺:

$q.when(Pinterest.getBoardPins('490329546869188172')).then(功能(响应){$scope.pins = response.data;});

AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程.这将 JavaScript 分为经典和 AngularJS 执行上下文.只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等.

要将 ES6 承诺带入 AngularJS 执行上下文，请使用 $q.when.

<块引用>

$q.when

将可能是值或(第 3 方)然后可承诺的对象包装到 $q 承诺中.当您处理可能是也可能不是承诺的对象，或者承诺来自不可信的来源时，这很有用.

—AngularJS $q 服务 API 参考 - $q.when

<小时>

或者使用 $q 构造函数创建承诺.

function getBoardPins (id) {//返回新的承诺(函数(解决，拒绝){返回 $q(函数(解决，拒绝){PDK.request('/v1/boards/' + id + '/pins/', 'GET', {fields: 'id,link,url,creator,board,created_at,note,color,counts,media,attribution,图像，元数据'}，功能(响应){如果(响应){解决(响应)；}拒绝();});});}

这将创建一个与 AngularJS 框架及其摘要循环集成的承诺.

I'm trying to use the Pinterest JavaScript SDK to get some pin data for a project. I have a method in a Pinterest service I created that gets called in my HomeController. I tried throwing the response inside of a promise so I could put it on my HomeController's $scope and display it in my view. However, $scope.pins is undefined in my view. Why is it undefined? Seems like the promise is working. Still learning promises.

Pinterest Service

function getBoardPins (id) {
  return new Promise(function (resolve, reject) {
    PDK.request('/v1/boards/' + id + '/pins/', 'GET', {fields: 'id,link,url,creator,board,created_at,note,color,counts,media,attribution,image,metadata'}, function (response) {
      if (response) {
        resolve(response);
      }

      reject();
    });
  });
}

Home Controller

Pinterest.getBoardPins('490329546869188172').then(function (response) {
  $scope.pins = response.data;
});

View

<h1>Pinterest</h1>
<div ng-repeat="pin in pins">
  <div>{{pin}}</div>
</div>

解决方案

Use $q.when to convert the ES6 promise to an AngularJS promise:

$q.when(Pinterest.getBoardPins('490329546869188172'))
  .then(function (response) {
    $scope.pins = response.data;
});

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

To bring an ES6 promise into the AngularJS execution context, use $q.when.

$q.when

Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.

— AngularJS $q Service API Reference - $q.when

---

Alternately create the promise with the $q constructor.

function getBoardPins (id) {
  //return new Promise(function (resolve, reject) {
  return $q(function (resolve, reject) {
    PDK.request('/v1/boards/' + id + '/pins/', 'GET', {fields: 'id,link,url,creator,board,created_at,note,color,counts,media,attribution,image,metadata'}, function (response) {
      if (response) {
        resolve(response);
      }

      reject();
    });
  });
}

This creates a promise that is integrated with the AngularJS framework and its digest cycle.

这篇关于无法在 AngularJS 视图中显示 ES6 承诺值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！