使用 AngularJS 工厂从 Parse.com 获取数据

Question

我正在使用 AngularJS (v1.6.7) and Parse Server (v2.3.3) 开发电子商务网络应用。

我在 Parse Server 中创建了 Category 和 Product class。我正在尝试获取每个类别的一定数量的产品。

例如，在主页中，每个类别将检索 20 个产品。其他页面商品数量变化

我想使用一个工厂来获取任何类别中给定数量的产品（数量和类别的产品将是作为参数传递给函数）。所以我将能够在其他控制器中重用它。

ProductsFactory工厂：

sebetimapp.factory('ProductsFactory', ['$q', function($q){
    Parse.initialize('MY_APP_ID', 'JS_KEY');
    Parse.serverURL = 'https://parseapi.back4app.com/';

    let fac = {};

    fac.getProducts = function(cat, lmt) {
        let Category = Parse.Object.extend('Category'),
            qr = new Parse.Query(Category);

        qr.get(cat, {
            success: function (res) {
                let product_dfd = $q.defer(),
                    Product = Parse.Object.extend('Product'),
                    query = new Parse.Query(Product);

                query.include('category');

                query.equalTo('category', res);

                if (lmt) {
                    query.limit(lmt);
                }

                query.find({
                    success: function(results) {
                        product_dfd.resolve(results);
                    },
                    error: function(err) {
                        product_dfd.reject(results);
                    }
                });

                return product_dfd.promise;
            },
            error: function(object, error) {
                //
            }
        });
    };

    return fac;
}]);

productsCtrl 控制器：

sebetimapp.controller('productsCtrl', ['$scope', '$log', '$location', '$q', 'ProductsFactory', function($scope, $log, $location, $q, ProductsFactory) {
    let params = $location.search(); // To grab category ID from URL.

    ProductsFactory.getProducts(params.cat, 20).then(function(response) {
        $log.log('Successfully retrieved products.');
    }, function(error) {
        $log.log('Unable to get products.');
    });
}]);

我执行的时候出现错误：

TypeError: Cannot read property 'then' of undefined

但如果我不使用这个工厂并在我的控制器中定义 getProducts() 函数，它工作正常。

为什么会这样？我是 AngularJS 的新手。任何帮助将不胜感激。

Answer 1

.then() 方法仅适用于 Promises。您的函数似乎没有 returning 任何东西（因此，.then() 不可用）。

这可能有帮助：

sebetimapp.factory('ProductsFactory', ['$q', function($q) {
  Parse.initialize('MY_APP_ID', 'JS_KEY');
  Parse.serverURL = 'https://parseapi.back4app.com/';
  var fac = {};
  fac.getProducts = function(cat, lmt) {
    var Category = Parse.Object.extend('Category'),
      qr = new Parse.Query(Category);
    return qr.get(cat)
      .then(function(res) {
        var Product = Parse.Object.extend('Product'),
          query = new Parse.Query(Product);
        query.include('category');
        query.equalTo('category', res);
        if (lmt) {
          query.limit(lmt);
        }
        return query.find();
      });
  };
  return fac;
}]);

Parse JS API return 承诺中的大多数方法。您可以直接使用它们（而不是使用 success 和 error 回调）。我在 Parse 上工作已经很久了（我认为它不再可用）所以你可能需要自己弄清楚细节.. 方便 Link: http://docs.parseplatform.org/js/guide/#promises

TLDR；您的工厂功能需要 return 一个承诺，但 return 什么都没有，因此 .then() 不可用

编辑：这是对原始代码进行最少更改的另一种方法（但这不是最好的方法）

sebetimapp.factory('ProductsFactory', ['$q', function($q) {
  Parse.initialize('MY_APP_ID', 'JS_KEY');
  Parse.serverURL = 'https://parseapi.back4app.com/';
  var fac = {};
  fac.getProducts = function(cat, lmt) {
    var Category = Parse.Object.extend('Category'),
      qr = new Parse.Query(Category),
      // Move the deffered object out of the inner function
      product_dfd = $q.defer();
    qr.get(cat, {
      success: function(res) {
        var Product = Parse.Object.extend('Product'),
          query = new Parse.Query(Product);
        query.include('category');
        query.equalTo('category', res);
        if (lmt) {
          query.limit(lmt);
        }
        query.find({
          success: function(results) {
            product_dfd.resolve(results);
          },
          error: function(err) {
            product_dfd.reject(results);
          }
        });
      },
      error: function(object, error) {}
    });
    // Return the deferred object
    return product_dfd.promise;
  };
  return fac;
}]);

使用 AngularJS 工厂从 Parse.com 获取数据

Get data from Parse.com using AngularJS factory

javascript

angularjs

parse-platform

angularjs-factory