Блог

Главная - Вопросы по программированию - Как использовать функцию обратного вызова при успешном HTTP-запросе в Angular2

Как использовать функцию обратного вызова при успешном HTTP-запросе в Angular2

#angular #angular2-services

#angular #angular2-сервисы

Вопрос:

Я новичок в Angular2. Я сослался на руководство Hero, приведенное на официальном веб-сайте, и написал следующий код для HTTP post-запроса в Angular2 в соответствии с моим требованием. Я привык к java-скрипту и использую вызовы AJAX для взаимодействия с веб-сервером, в вызове javascript-AJAX мы можем выполнить некоторую функцию при успешном вызове AJAX (функция обратного вызова). Как мне добиться этого в angular2? я также хочу использовать оповещения. При успешном / неудачном выполнении каждого вызова отображается окно с предупреждением о его успехе или неудаче.

 @Injectable()
export class LicenceService {
constructor(private http: Http) {}
private headers = new Headers({'Content-Type': 'application/json'});
/* URL to web api*/
private licenceUrl = 'http://localhost:5000/***/****/installation/uploadLicense';  



sendData(key: string){
    return this.http
        .post(this.licenceUrl, key, this.headers)
        .toPromise()
        .then(res => res.json().data)
        .catch(this.handleError);
}
private static handleError (error: any) {
    console.log(error);
    return Promise.reject(error.json());
}

Ответ №1:

Все, что вам нужно, уже есть в вашем коде

 sendData(key: string){
    return this.http
        .post(this.licenceUrl, key, this.headers)
        .toPromise()
        .then(res => {
           res.json().data;
           // code here is executed on success
         })
        .catch(this.handleError);
}

или для вызывающего

 this.sendData(somekey).then(result => /*put after after success code here */);

Комментарии:

1. Спасибо. Это было очень полезно. Я подробно и снова прочитал документы Angular и прояснил свои сомнения. Службы и раздел HTTP решили мою проблему.

Ответ №2:

Хотя на ваш вопрос уже дан ответ, вот еще один подход, который разделяет логику обслуживания и обратного вызова. Я добился этого с помощью subscibe и Observable

Вот мой вопрос.compnent.ts

     ngOnInit() {
               this.getQuestions();
    }        
    getQuestions() {
        this.yourService.getQuestions()
            .subscribe(
            data => this.displayData = data,
            error => this.errorMessage = <any>error,
            () => { 
                  //this gets called on completion, callback code comes here
                  } 
            );
    }

И мой вопрос.service.ts, который обрабатывает часть HTTP-запросов

    getQuestions(): Observable<DisplayData[]>{
      const endPoint = 'http://localhost:3000/yourApi';
      return this.http.get(endPoint).map((response: Response) => response.json());
}

Примечание: this.displayData — это переменная типа displayData[], которая используется в качестве наблюдаемой в службе.

Извините за длинный пост. Приветствия 🙂

Метки: