Question

我无法理解承诺。从概念上讲，我得到了他们正在做的事情，我只是不知道如何编写它（或者，至少，调试它）。

MyController.js

(function() {
    angular
    .module('WizmoApp')
    .service('StoreService', storeService);
    storeService.$inject = ['$http', '$q', 'ngAuthSettings'];

    function storeService($http, $q, ngAuthSettings) {

        this.getStores = function() {
            $.getJSON('Content/data/Stores.json', function (json) {
                            return json;
            });
    };
})();

据我所知，这是承诺的格式。

MyService.js

function Submit(e) {
  // form submittion using ajax.
  var name = $("#name").val();
  var place = $("#place").val();
  var message = $("#message").val();

  // error checking
  if ($("#name").val() == "") {
    $("#name").focus();
    $("#error").html("Enter the Name.");
    return false;
  } else if ($("#place").val() == "") {
    $("#place").focus();
    $("#error").html("Enter the Place.");
    return false;
  } else if ($("#message").val() == "") {
    $("#message").focus();
    $("#error").html("Enter the message.");
    return false;
  } else if ($(name != '' && place != '' && message != '')) {
    $("#error").html("Form submitted successfully.")
    $("#form")[0].reset();

    // on successful, data submission using php
    $.post("xxx.xyz/abc.php", {
      name: name,
      place: place,
      message: message
    }, function(data) {
      $("#error").append(data);
    });
  }
}

我得到的错误是

StoreService.getStores（...）。然后不是函数

Answer 1

如果没有在plunker中进行测试，您的服务将作为“我的服务”注入。不是＆＃39; StoreService＆＃39;，所以看起来应该是这样的：

storeController。$ inject = [＆＃39; $ scope＆＃39;，＆＃39; $ http＆＃39;，＆＃39; $ q＆＃39;，＆＃39; $ window＆＃39;，＆＃39; StoreService＆＃39;，＆＃39; toastr＆＃39;]; function storeController（$ scope，$ http，$ q，$ window，StoreService，toastr）{

StoreService.getStores().then(

Answer 2

您需要返回promise解析器，以便可以在其上调用.then（）函数。例如：

this.getStores = function() {
  return $q(function(resolve, reject) {
    $.getJSON('Content/data/Stores.json', function (json) {
        resolve(json);
    });
  });
}

或旧的CommonJS表示法：

this.getStores = function() {
  var deferred = $q.defer();
  $.getJSON('Content/data/Stores.json', function (json) {
      deferred.resolve(json);
  });
  return deferred.promise;
}

请记住将$ q注入StoreService。有关详细信息，请参阅此处：https://docs.angularjs.org/api/ng/service/$q

Answer 3

我不认为这是相关的 - 我认为这只会使我的问题复杂化，但它似乎紧密相关。这项服务的目的是让我在罐头和＃34;之间来回翻转。 json数据和实时api数据。

请参阅交换机中使用的dataSource变量：

storeController.js

StoreService.getStores().then(function(response) {
    vm.stores = response.data;
}, function(response) {
    toastr.error(response);
 });

storeService.js

(function() {
    'use strict';

    angular
        .module('WizmoApp')
        .service('StoreService', storeService);

    storeService.$inject = ['$http', '$q', 'ngAuthSettings'];

    function storeService($http, $q, ngAuthSettings) {

       var dataSource = 'api';// local or api

        this.getStores = function() {

            return $q (function(resolve, reject) {
                switch (dataSource) {
                    case 'api'://staging - live api data
                        $http({
                            method: 'get',
                            url: serviceBase + 'api/Stores'
                        }).then(function(results) {
                            resolve(results.data);
                        });
                        break;

                    default: // dev - local json
                        $.getJSON('Content/data/Stores.json', function (json) {
                            resolve(json);
                        });
                }
            });
        };

所以，现在我有一个嵌套在另一个里面的诺言。它似乎有用，我只是不确定它是否有效。

有棱有角的承诺和服务

3 个答案: