角丸2の404でHTTP呼び出しが失敗したときにプレースホルダオブジェクトを作成するにはどうすればよいですか？

Question

Angular 2を使用してJSONを返すHTTPリクエストを作成していますが、これを使用してオブジェクトのプロパティにデータを設定しています。 URLは、http.getメソッドを呼び出す関数に渡すユーザー名に基づいて変更されます。明らかに、データベースに存在しない関数にユーザー名を渡すと、404エラーがスローされます。ここで

は、http呼び出しです：

getUser(un: string):Observable<TwitchUser> { 
    return this.http.get('https://api.twitch.tv/kraken/channels/' + un, { headers: this.getHeaders() }) 
     .map(r=>{ 
     let body = r.json(); 
     var user:TwitchUser = { 
      name: un, 
      displayName: body.display_name, 
      status: body.status, 
      logo: body.logo, 
      isOnline: false, 
      url: body.url 
     }; 
     return user; 
     }) 
     .catch(this.handleError); 
    } 

私が何をしたいのか欠落しているユーザーアカウントに対して「プレースホルダ」オブジェクトを構築し、404エラーがスローされたときに、です。

このような何か：

var user:TwitchUser = { 
    name: un, 
    displayName: un, 
    status: 'No active account found for this user!', 
    logo: 'http://hotchillitri.co.uk/wp-content/uploads/2016/10/empty-avatar.jpg', 
    isOnline: false, 
    url: '' 
}; 

しかし、私は誰も私を助けることができる角度2でこれを実現する方法がわかりませんか？

ありがとうございます！

更新：

私は以下の回答方法＃1を試してみました：

.catch((error: any):Observable<TwitchUser> => { 
     var user: TwitchUser = { 
      name: un, 
      displayName: un, 
      status: 'No active account found for this user!', 
      logo: 'http://hotchillitri.co.uk/wp-content/uploads/2016/10/empty-avatar.jpg', 
      isOnline: false, 
      url: '' 
     }; 
     return user; 
     } 

しかし、私は最初の行に、このエラーを取得する：

Argument of type '(error: any) => TwitchUser' is not assignable to parameter of type '(err: any, caught: Observable<TwitchUser>) => ObservableInput<{}>'. 
    Type 'TwitchUser' is not assignable to type 'ObservableInput<{}>'. 
    Type 'TwitchUser' is not assignable to type 'ArrayLike<{}>'. 
     Property 'length' is missing in type 'TwitchUser'. 

私は方法＃2を試してみました以下の答え：

ngOnInit() { 
    let userNames: string[] = this.service.getUsernames(); 
    for (var i = 0; i < userNames.length; i++) { 
     this.service.getUser(userNames[i]) 
     .subscribe(u => { 
      this.service.getUserIsOnline(u.name).subscribe(val => { 
      u.isOnline = val; 
      this.users[this.users.length] = u; 
      if(this.users.length == userNames.length){ 
       this.changeMode(0); 
      } 

      }); 

     } 
     , (error) => { 
      console.log("an error occurred! Username is " + userNames[i]) 
     } 
     ,() => { 
      console.log("inside the 'final' block. Username is " + userNames[i]) 
     } 
     ); 
    } 
    } 

しかしcatchとfinallyブロックは一度しか実行されないため（i = userNames.lengthをログに記録するため）、どのユーザー名で問題が発生したのか判断できません。

Answer 1

いくつかのもの：

「スロー」をインポートしていることを確認してくださいサービス：

import 'rxjs/add/observable/throw'; 

これがなければ、コードはコンパイルされますが、正しく動作しません。また

にエラーハンドラに戻りラインを変更してみてください：あなたのメソッドの戻り値の型と一致することを

return Observable.throw(user); 

、その後、あなたがコンポーネント側のユーザーにアクセスすることができます。

, (user) => { 
//do something with user.. 
     } 

Answer 2

上記のように、エラーメッセージまたは「プレースホルダ」オブジェクトを返すものを.catch（）で指定できます。

.catch((error: any) => { 
     // you can return error 
     return (Observable.throw(error.json())) 
     } 
    }) 

またはプレースホルダオブジェクトをretrunできるが、それはすべてあなたの条件

.catch((error: any) => { 
     // you can return error 
      var user:TwitchUser = { 
      name: un, 
      displayName: body.display_name, 
      status: body.status, 
      logo: body.logo, 
      isOnline: false, 
      url: body.url 
      }; 
      return user; 
     } 
}) 

に依存し、あなたがあなたのサービスを消費しているところから、エラーブロックでのエラー応答をキャッチすることができ

.subscribe((result) => { 
     console.log(result) 
    } 
     , (error) => { 
      // you can catch error response in this block 
      console.log(error) 
     } 
     ,() => { 
      //finally block, always executes 
     } 
    );