使用 apollo 在 Angular 中捕获 http 状态代码

Posted 2023-03-10

【中文标题】使用 apollo 在 Angular 中捕获 http 状态代码

【英文标题】：capture http status code using apollo in angular

【发布时间】：2019-09-18 16:45:40

【问题描述】：

我是 Angular 的新手。我正在使用 Apollo 客户端执行 graphql 查询。我需要检查我得到的状态码并返回消息。请帮我做同样的事情。 这是我使用的代码。如何捕获我得到的状态码。附件将显示我如何获得状态码。

let res = this.apollo.use('dataManipulation').query(
      query: myquery,
      fetchPolicy: 'network-only',
      variables:
        userId: this.userId
            
    );
     res.subscribe(listData => 
      this.studyData=[];
      this.resourceData=listData.data['StudyList'];
      this.resourceData.entry.forEach(data =>

        const customFormat= 
          id:data.resource.id,
          title:data.resource.title,

        

        this.studyData.push(customFormat);
        console.log("studyData",this.studyData)
      );    
    ,
      err => 
        console.log("----------",err);
      
    );

【参考方案1】：

如果是针对每条消息，我建议你使用HTTP Interceptor。

@Injectable()
export class YouInterceptor implements HttpInterceptor 

  constructor()  

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
    return next.handle(request).pipe(
      catchError(error => this.handleError(error))
    );
  

  private handleError(error: HttpErrorResponse): Observable<any> 
    if (error.status === 404) 
      // Do your thing here       
    return EMPTY;
  

并导入它：

@NgModule(
  bootstrap: [AppComponent],
  imports: [...],
  providers: [
    
      provide: HTTP_INTERCEPTORS,
      useClass: YouInterceptor,
      multi: true
    
  ]
)
export class AppModule 

【讨论】：

你能解释一下吗..在这里我得到响应代码 401 并且消息是未经授权的。那么我将如何为它编写代码

如果你想处理错误 401，然后在代码 503 中替换为 401 并在 if 中执行你的策略。可以看一个例子here的HttpInterceptor

【参考方案2】：

Apollo 提供了一种通过链接处理错误的综合方法，特别是 apollo-error-link。与使用 HttpInterceptor 不同，这允许您为网络错误以及包含在响应中的错误指定逻辑作为errors 数组的一部分：

import  onError  from 'apollo-link-error';

const link = onError(( graphQLErrors, networkError ) => 
  if (graphQLErrors)
    graphQLErrors.map(( message, locations, path ) =>
      console.log(
        `[GraphQL error]: Message: $message, Location: $locations, Path: $path`,
      ),
    );

  if (networkError)
    console.log(`[Network error]: Status: $networkError.statusCode`);
  
);

此链接也可以与apollo-link-retry 结合使用，以实现更顺畅的错误处理。链接被组合，然后传递给客户端的构造函数，例如：

const errorLink = onError(...);
const httpLink = new HttpLink(...);
const link = ApolloLink.from([
  errorLink,
  httpLink,
]);

const client = new ApolloClient(
  link,
  ...
)