2017-01-09 1 views
0

메서드의 동기 호출을 시도 할 때 완전히 고생했습니다. 서버 측 (단순화 된 버전, 원래는 다른 API 호출)에서 클라이언트 목록을 얻으려고 시도하고 웹 페이지에서이 목록을 인쇄합니다.클라이언트 (각도) 측에서 유성 메서드의 동기 호출

클라이언트 측 코드 (각도 1) :

import template from './clientsList.html'; 
import {Meteor} from 'meteor/meteor'; 

class ClientsList { 
    constructor() { 
     console.log('First'); 
     Meteor.call('getClients', function (error, response) { 
      if (error) { 
       // If our API returned an error, we'd see it in the console. 
       console.log(error); 
      } else { 
       console.log(response); 
       this.clients = response; 
      } 
     }); 
     console.log('Second'); 
    } 
} 

const name = 'clientsList'; 

export default angular.module(name, [ 
    angularMeteor 
]).component(name, { 
    template, 
    controllerAs: name, 
    controller: ClientsList 
}) 
} 

서버 측 코드 (유성) :

import {Meteor} from 'meteor/meteor'; 
    var Future = Npm.require('fibers/future'); 

    Meteor.methods({ 
      // Synchronous method 
     'getClients': function() { 
      // Create our future instance. 
      var future = new Future(); 
var clients = {[Name: 'Peter']};  
      future.return(clients); 
      // preventinvg method from completing until the future receives a value 
      return future.wait(); 
     } 
    }); 

템플릿 :

<ul> 
     <li ng-repeat="client in clientsList.clients"> 
       {{client.Name}} 

     </li> 
    </ul> 

미래의 내 사용 할 것 같다 서버 측 코드 작업이 동 기적으로 작동하지 않습니다.

First 
Second 
Array[1] 

가 기대 : : 내 콘솔에서 무엇을 얻을이

First 
Array[1] 
Second 

정말 어떤 도움을 부탁드립니다.

+0

코드의 동기 섹션에 미래가 있습니다 (완전히 메소드 안에 있음). 귀하의 방법 자체가 비동기 호출을하고 있지만 그렇지 않은 경우 유용합니다. 고객에게 약속이 필요합니다. 또한 메소드 이름 ('getClients')은 pub-sub를 사용할 수있을 때 데이터를 가져 오는 메소드를 사용한다는 것을 의미합니다. –

+1

@MichelFloyd, OP는 원래 서버 코드가 API를 호출하므로 잠재적으로 비동기식임을 나타냅니다. @OP, API 호출을 할 때 [http 패키지] (https://docs.meteor.com/api/http.html)를 서버에서 동기식으로 사용할 수 있습니다. 타사 API 라이브러리를 사용하는 경우에도 ['wrapasync'] (https://docs.meteor.com/api/core.html#Meteor-wrapAsync)를 사용하여 포장 할 수 있지만'Future'를 사용하면 if 이것이 당신이 선호하는 것입니다. – MasterAM

+0

맞아 그가 클라이언트에서 비동기 호출을하는 코드를 보지만'Meteor.call()'자체 때문에 서버에서 무엇을 하든지 상관없이 발생할 수있는'First, Array [1], Second'를 기대한다. 비동기입니다. –

답변

2

서버 측 코드 (올바르게 작동하는 경우)는 향후 해결 될 때 단순히 전화를 걸기 만합니다.

이렇게하면 서버에 실제 데이터가있을 때 클라이언트 콜백이 호출되지만 동기화되지는 않습니다 (클라이언트에서 동기화할 방법이 없습니다).

당신은 당신의 코드를 단순화하기 위해 promises, async/await (ES7) 또는 observables (RxJS)를 사용하려고 할 수 있지만, 항상 뒤에서 비동기 될 것입니다.

+0

고마워요, 지금 당장 말이 되네요! 그래서 this.clients = response를 설정할 때; 클라이언트 측에서 템플릿에 어떻게 표시 할 수 있습니까? 그러나 이것은 내 코드가 비동기식이기 때문에 가정하는 것이기 때문에 클라이언트 측에서 항상 비동기입니다. 따라서 내 고객은 템플릿에 표시되지 않습니다. 어떻게 해결할 수 있습니까? – grehemmm

0

클라이언트에서 서버로의 메소드 호출은 동기가 될 수 없습니다. 읽어야합니다. Meteor.call

0

올바른 내용입니다. 클라이언트에서 서버로의 호출은 비동기 적이므로, 그것에 관해 할 수있는 것은 아무것도 없다.

을 템플릿에 넣으면 기본적으로 '로깅', '비동기 호출', '초'로깅의 세 가지 작업을 수행하게됩니다.

언젠가 나중에 비동기 호출이 반환되고 유성자 호출의 콜백을 입력합니다. 3 번째 console.log()를 할 때입니다.

나는 서버 호출을 동 기적으로 처리하지만 클라이언트와 서버 간의 비동기 동작과는 아무런 관련이 없음을 알고 있습니다.

+0

감사합니다. Angular의 비동기 메서드가 응답을 받고 this.clients 값에 할당 할 때 템플릿을 "대기"로 만들 수있는 방법이 있습니까? 왜냐하면 지금은 생성자가 this.clients 변수에 값을 완전히 끝내고 지정할 때까지 기다리지 않고 즉시 템플릿을 시작하는 것 같습니다. – grehemmm

관련 문제