Home / Questions / 10893
Accepted
Pedro Miguel Pimienta Morales
Asked: 2020-05-25 14:28:36 +0800 CST 2020-05-25 14:28:36 +0800 CST

TypeError: function(...).then 不是函数

  • 772

当试图通过工厂通过将其注入控制器来获取存储在本地存储中的信息时，会出现以下错误。

TypeError: getGroupsProf.dataGroups(...).then 不是函数

代码如下：

angular.module('gruposProfesor', ['ionic', 'ngCordova'])
    .controller('mostrarGruposProf', mostrarGruposProf)
    .factory('obtenerGruposProf', obtenerGruposProf);


mostrarGruposProf.$inject = ['$scope', 'obtenerGruposProf'];

function mostrarGruposProf($scope, obtenerGruposProf) {

    obtenerGruposProf.datosGrupos().then(function(data) {
        console.log(data);
    });

}

function obtenerGruposProf() {   

   return {

    datosGrupos: function() {

        var getGrupos, infoGrupos;

        getGrupos = localStorage.getItem('GruposProf');
        infoGrupos = JSON.parse(getGrupos);

        return infoGrupos;

    }

  };

}

提前感谢您的任何帮助。

angularjs

1 Answers

  1. Best Answer

    如果您使用的是 method .then，则它之前的对象很可能是thenable（或具有then 方法的对象）。通常实现这种方法的人是Promises。更仔细地查看您的代码，我们有

    datosGrupos: function() {

    var getGrupos, infoGrupos;

    getGrupos = localStorage.getItem('GruposProf');
    infoGrupos = JSON.parse(getGrupos);

    return infoGrupos;

}

    然后你打电话给谁

    obtenerGruposProf.datosGrupos().then(//....

    发生错误是因为该函数datosGrupos没有返回承诺，因此没有方法.then。该函数返回的是您在 localStorage 中的数据，这是一个普通对象。

    为了得到一个承诺，你应该做类似的事情

    angular.module('gruposProfesor', ['ionic', 'ngCordova'])
    .factory('obtenerGruposProf', obtenerGruposProf);

obtenerGruposProf.$inject = ['$q'];

function obtenerGruposProf($q) {       
   return {    
    datosGrupos: function() {
        var defer = $q.defer(); 
        // creas un objeto Deferred que tiene un método resolve y reject   
        var getGrupos, infoGrupos;    
        getGrupos = localStorage.getItem('GruposProf');
        infoGrupos = JSON.parse(getGrupos);  
        // resuelves la promesa con el valor obtenido
        defer.resolve(infoGrupos) ;
        // devuelves el .promise que es el que tiene el método then 
        return defer.promise;    
    }    
  };    
}

    你基本上会返回一个未来结果已经解决的承诺。这是一个错误，有两个原因

    1. 您正在不可避免地同步的操作中创建异步。

      localStorage 上的操作是同步的。getItem方法立即返回一个字符串，该字符串是操作的结果，而不是未来的结果。

      写起来要简单得多

      var data = obtenerGruposProf.datosGrupos();
console.log(data);

      写什么

      obtenerGruposProf.datosGrupos().then(function(data) {
    console.log(data);
});

      因为您正在创建不必要的嵌套。这让你离回调地狱更近了一步，这也是 Promise 存在的原因之一。

    2. 通常以这种方式编写 Promise 被认为是一种反模式，因为

      Promise 用于使异步代码保留同步代码的大部分缺失属性，例如扁平缩进和单通道错误。

      正如您之前看到的，您不需要创建缩进，如果出现错误，您可以使用简单的try...catch

      在 Deferred 反模式中，“deferred”对象是无缘无故创建的，使代码复杂化。

    在某些情况下，您可以方便地以这种方式编写代码，例如，当您必须进行 ajax 调用或返回存储的结果时。基本上你有两种选择，一种是同步的，另一种是异步的。在这种情况下，您可以这样做。

    angular.module('gruposProfesor', ['ionic', 'ngCordova'])
    .factory('obtenerGruposProf', obtenerGruposProf);

obtenerGruposProf.$inject = ['$q', '$http'];

function obtenerGruposProf($q, $http) {       
   return {    
    datosGrupos: function() {
        var getGrupos, infoGrupos;    
        getGrupos = localStorage.getItem('GruposProf');
        if (getGrupos) {
            infoGrupos = JSON.parse(getGrupos);
            var defer = $q.defer();
            defer.resolve(infoGrupos);
            return defer.promise;
        } else {
            return $http.get('/miapi/gruposprof');    
        }    
    }    
  };    
}

    然后您使用

    obtenerGruposProf.datosGrupos().then(function(data) {
    localStorage.setItem('GruposProf', JSON.stringify(data));
    console.log(data);
});

    在这种情况下，如有必要，请推迟，因为您无法确定调用是否是异步的，并且使用.then是完全合理的。

    最后请记住，如果您想在 localStorage 中缓存 ajax 调用的结果，那么已经有一个服务可以做到这一点。

    看看https://github.com/jmdobry/angular-cache。

    • 4