角度Apollo错误处理
发布时间:2020-12-17 10:16:28 所属栏目:安全 来源:网络整理
导读:大家好,我对apollo-angular和apollo-link-error的问题有点困惑.我尝试了几种不同的方法,我似乎无法在我的角度网络应用程序中捕获客户端的任何错误.我在下面发布了我的尝试.任何建议或一组额外的眼睛将非常感激. 基本上我所要做的就是当发生错误时提示我的用
大家好,我对apollo-angular和apollo-link-error的问题有点困惑.我尝试了几种不同的方法,我似乎无法在我的角度网络应用程序中捕获客户端的任何错误.我在下面发布了我的尝试.任何建议或一组额外的眼睛将非常感激.
基本上我所要做的就是当发生错误时提示我的用户有关问题.如果有人有一些替代npm包而不是apollo-link-error我都是耳朵. 尝试1: export class AppModule { constructor (apollo: Apollo,httpLink: HttpLink) { apollo.create({ link: httpLink.create({ uri: 'http://localhost:8080/graphql' }),cache: new InMemoryCache() }); const error = onError(({ networkError }) => { const networkErrorRef:HttpErrorResponse = networkError as HttpErrorResponse; if (networkErrorRef && networkErrorRef.status === 401) { console.log('Prompt User',error); } }); } } 尝试2: export class AppModule { constructor (apollo: Apollo,cache: new InMemoryCache() }); const error = onError(({networkError}) => { if (networkError.status === 401) { console.log('Prompt User',error); } }); } } 尝试3: export class AppModule { constructor (apollo: Apollo,httpLink: HttpLink) { apollo.create({ link: httpLink.create({ uri: 'http://localhost:8080/graphql' }),cache: new InMemoryCache() }); 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]: ${networkError}`); }); } }
您可以将apollo-link-error视为中间件,因此您必须将其添加到apollo客户端中的获取过程中.
这意味着您必须创建另一个结合了http和错误链接的apollo链接: import { ApolloLink } from 'apollo-link'; import { HttpLink } from 'apollo-link-http'; import { onError } from 'apollo-link-error'; ... const errorLink = onError(({ graphQLErrors,); if (networkError) console.log(`[Network error]: ${networkError}`); }); } } const httpLink = new HttpLink({ uri: "http://localhost:8080/graphql" }); const httpLinkWithErrorHandling = ApolloLink.from([ errorLink,httpLink,]); apollo.create({ link: httpLinkWithErrorHandling,cache: new InMemoryCache() }); ... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 树形ztree 与angularjs结合,实现下级数据异步加载,点击复
- laravel – bash init.sh在尝试设置Homestead时没有创建我的
- 浅谈WebService开发三(动态调用WebService)
- 嘲笑 – 有没有人使用$httpBackend(模块ngMockE2E中的服务)
- Angular2仅在特定值或布尔值为true时使用排序管道
- Stackless Scala With Free Monads,完整的例子
- Bootstrap3基础 input-group-btn 按钮与输入框 横向组合
- bootstrap css样式之表单
- twitter-bootstrap-3 – 如何使用Bootstrap 3.0增加列之间的
- bash – 从文件中读取关联数组