2016-11-22 3 views
0

Мой случай:Как вернуть метод «then()» в angularjs?

app.js:

let app = angular.module('myApp', []); 

app.controller('login', function ($scope, $login) { 
    $scope.account = {}; 

    $scope.loginForm_submit = function ($event, account) { 
     $event.preventDefault(); 

      if ($login.isValid(account)) { 
       $login.submit(account); 

       // goal: 

       $login.submit(account).then(function() { 
        window.location = '/' 
       }, function (msg) { 
        console.log(msg) 
       }); 
      } 
    }; 
}); 

login.js:

app.factory('$login', function() { 
    let o = { 
     isValid: function (x) { 
      let success = false; 

      // validating... 

      return success 
     }, 
     submit: function (x) { 
      // prevent to force submitting 
      if (this.isValid(x)) { 
       let formData = new FormData(), xhttp = new XMLHttpRequest(); 

       // appending data to 'formData' via 'x'... 

       xhttp.onreadystatechange = function() { 
        if (xhttp.readyState === XMLHttpRequest.DONE) { 
         let data = JSON.parse(xhttp.responseText); 

         if (data['Success']) { 
          // return then() with successCallback() function 
         } else { 
          let msg = data['ErrorMessage']; 

          // return then() with errorCallback() function        
         } 
        } 
       } 

       xhttp.open('POST', '/account/register'); 
       xhttp.send(formData); 
      } 
     } 
    } 

    return o 
}); 

data является объектом, как:

let data = { 
    'Success': false, 
    'ErrorMessage': 'Invalid login attempt.' 
}; 

Я хочу вернуться then() метод корму er для представления результата. Как я могу это сделать?

UPDATE:

В контроллере:

[HttpPost] 
public async Task<ObjectResult> Login(LoginViewModel model) 
{ 
    IDictionary<string, object> value = new Dictionary<string, object>(); 
    value["Success"] = false; 

    if (ModelState.IsValid) 
    { 
     // login 
     value["Success"] = true; 
    } 

    return new ObjectResult(value); 
} 
+0

use $ q для возврата обещания – simon

+3

Почему вы делаете все это самостоятельно? Угловые предложения '$ http', которые возвращают обещание на его вызовы iirc. – tkausl

+0

вы должны использовать '$ q' – vistajess

ответ

2

Прежде всего, следует избегать использования $ для ваших собственных функций.

О вашей проблеме, вам нужно использовать $q. И вы должны использовать какие угловые предложения для вас.

Позвольте мне дать вам это:

app.factory('loginFactory', function($q, $http) { 
    var ret = { 
     isValid: isValid, 
     submit: submit 
    } 

    return ret; 

    function isValid(x) { 
     // Your code ... 
     return false; 
    } 

    function submit(x) { 
     // x is your form data, assuming it's a JSON object 

     var deferred = $q.defer(); 

     // Assuming you're posting something 
     $http.post('yoururl', x,{yourConfigAsAnObject: ''}) 
     .then(function(success){ 
      console.log(success.data); 
      deferred.resolve(success.data); 
     }, function(error) { 
      console.log(error); 
      deferred.reject(error); 
     }); 

     return deferred.promise; 
    } 
}); 

Теперь в контроллере, вы можете использовать

loginFactory.submit(yourParam).then(function(success){ 
    // Your code 
}, function(error) { 
    // Your code 
}); 
+0

Спасибо! Можете ли вы объяснить, почему я должен «избегать использования $ в функции»? –

+0

Поскольку, например, если вы используете угловой материал, у вас есть служба под названием '$ mdDialog'. Итак, если вы решили сделать свою услугу с именем '$ mdDialog', у вас возникнет конфликт. Вы понимаете? Таким образом, вы * можете * вызывать свои собственные функции с помощью '$', но дать им конкретные имена, такие как '$ myAppLoginFactory' – trichetriche

1
app.factory('$login', function ($q) { 
let o = { 
    isValid: function (x) { 
     let success = false; 

     // validating... 

     return success 
    }, 
    submit: function (x) { 
     var d = $q.defer(); 
     // prevent to force submitting 
     if (this.isValid(x)) { 
      let formData = new FormData(), xhttp = new XMLHttpRequest(); 

      // appending data to 'formData' via 'x'... 

      xhttp.onreadystatechange = function() { 
       if (xhttp.readyState === XMLHttpRequest.DONE) { 
        let data = JSON.parse(xhttp.responseText); 

        if (data['Success']) { 
         // return then() with successCallback() function 
         d.resolve('success'); 
        } else { 
         let msg = data['ErrorMessage']; 
         d.reject(msg); 
         // return then() with errorCallback() function        
        } 
       } 
      } 

      xhttp.open('POST', '/account/register'); 
      xhttp.send(formData); 
     } 
     else { 
      d.reject('error'); 
     } 
     return d.promise; 
    } 
} 

return o 
}); 
1

чувак, я сделал функцию образца с обещанием

$ д должно быть введенные в качестве зависимости

class AppUserService { 


constructor($http,CONFIG_CONSTANTS,$q, AuthService) { 
    this.API_URL = CONFIG_CONSTANTS.API_URL; 
    this.$http = $http; 
    this.$q = $q; 
    this.api_token = AuthService.api_token; 
} 

getAppUserList() { 
    const deferred = this.$q.defer(); 
    this.$http.get(`${this.API_URL}/customer?api_token=${this.api_token}`) 
     .success(response => deferred.resolve(response)) 
     .error(error => deferred.reject(error)); 
    return deferred.promise; 
} 
} 

его в форме ES6.

Как использовать:

AppUserService.getAppuserList().then(success => { 
    // code for success 
},error => { 
    // code for error 
}) 
1
submit: function (x) { 

      return $q(function (resolve, reject) { 
       // prevent to force submitting 
       if (this.isValid(x)) { 
        let formData = new FormData(), xhttp = new XMLHttpRequest(); 

        // appending data to 'formData' via 'x'... 

        xhttp.onreadystatechange = function() { 
         if (xhttp.readyState === XMLHttpRequest.DONE) { 
          let data = JSON.parse(xhttp.responseText); 

          if (data['Success']) { 
           resolve(data); 
           // return then() with successCallback() function 
          } else { 
           let msg = data['ErrorMessage']; 
           reject(msg);       
          } 
         } 
        } 

        xhttp.open('POST', '/account/register'); 
        xhttp.send(formData); 
       } 
       else 
       reject('x not valid'); 
       } 
      } 
     } 

Но я рекомендовал использовать угловую $http обслуживание.

Смежные вопросы