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: ''
};

然而，我不知道如何使用Angular 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

您可以在.catch（）中指定要返回错误消息或＆＃34;占位符＆＃34;如上所述，对象。

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

或者您可以退回占位符对象，这一切都取决于您的要求

.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
        }
    );

Answer 2

有几件事：

确保您在服务中输入“throw”：

voucherid error_code
123456     Error

没有这个，代码将编译，但它将无法正常工作。

另外，尝试将错误处理程序中的返回行更改为：

import 'rxjs/add/observable/throw';

这将匹配您的方法的返回类型，然后您可以使用以下命令访问组件端的用户：

return Observable.throw(user);

当HTTP呼叫失败并且404使用Angular 2时，如何构建占位符对象？

2 个答案: