Как я могу ловить ошибки от функции обратного вызова

Question

У меня есть компонент с этим:

      this.loginService.login(this.user, () => {
        this.router.navigateByUrl('/');
      });

И услуга с этим методом:

    login(credentials, callback) {
        const headers = new HttpHeaders(credentials ?
            { authorization: 'Basic ' + btoa(credentials.email + ':' + credentials.password) }
            : {});

        this.http.get(this.API.crudAdmin + 'admin?email=' + credentials.email,
            { headers: headers }).subscribe(response => {
                if (response['name']) {
                    this.authenticated = true;
                } else {
                    this.authenticated = false;
                }
                return callback && callback();
            }, error => {
                throw new Error('Error');
            });
    }

Как я могу отловить ошибку, выдаваемую методом входа в систему, когда я вызываю его из компонента?

Answer 1

Это обычный шаблон для передачи ошибки в качестве первого аргумента в функции обратного вызова. Таким образом, ваша функция входа в систему будет выглядеть так:

login(credentuals, callback) {
  this.http.get(options).subscribe((response) => {
    // Logic, assuming it was successfuly, call callback with the first argument as null
    callback(null)
  }, (error) => {
    // in the event of an error, pass error exception as the first argument
    callback(error)
  });
}

, чтобы вы могли обработать это в своем компоненте:

this.loginService.login(credentials, (error) => {
  if (error) {
    // show error dialog, etc
  } else {
    this.router.navigateByUrl('/');
  }
})

Answer 2

Вы можете передать функцию обратного вызова с ошибкой вместе с успешным обратным вызовом. Обратный вызов ошибки вызывается при сбое запроса GET:

this.loginService.login(this.user,
  () => this.router.navigateByUrl('/'),
  //handle the error here, log to an error service etc.
  (err) = > console.error(err)
);

На стороне службы в обработчике ошибок Observable вы вызываете errorCallback, который вы передали от компонента :

login(credentials, successCallback, errorCallback) {
  const headers = new HttpHeaders(credentials ? {
      authorization: 'Basic ' + btoa(credentials.email + ':' + credentials.password)
    } :
    {});

  this.http.get(this.API.crudAdmin + 'admin?email=' + credentials.email, {
    headers: headers
  }).subscribe(response => {
    if (response['name']) {
      this.authenticated = true;
    } else {
      this.authenticated = false;
    }
    successCallback && successCallback();
  }, 
  errorCallback);
}

Традиционная попытка перехвата здесь не сработает, поскольку это асинхронная операция, блок перехвата не сможет перехватить ошибку, когда в итоге произойдет сбой GET.

Это связано с тем, что метод loginService.login возвращается немедленно, в то время как запрос GET выполняется асинхронно в фоновом режиме. Любая ошибка из GET не будет обрабатываться блоком catch, окружающим вызов loginService.login.

Answer 3

Вы можете окружить свой вызов функции блоком try / catch.

try {
    this.loginService.login(this.user, () => {
        this.router.navigateByUrl('/');
    });
} catch (error) {
    // do something with the thrown error
}