前端网络请求的错误处理

错误处理：当客户端发起一个请求，但无法从服务端得到正确响应，倘若没有错误处理进行提示，那么我们将很难找到出现bug的原因。
官方文档传送门
当使用HttpClient模块请求数据时，如果成功就会返回数据，失败就会返回一个错误(error)而不再是成功的响应
文档示例(中文即个人解释)：

showConfig() {this.configService.getConfig().subscribe((data: Config) => this.config = { ...data }, // 请求成功时的回调函数error => this.error = error //请求错误时的回调函数);
}

解释：showConfig()是一个调用了服务的方法，configService是声明的(服务)类，服务类中有getConfig()方法，在.subscribe()订阅函数中有两个回调方法。error回调函数即能在数据访问失败时给用户一些反馈。
对于文档例子举详细例子

getImage(num:number){//点击按钮的响应函数    this.getImageService.getService(this.url[num]).subscribe(   (response:any)=>{  //成功的回调if(response==null){       this.eMsg="返回值为空";      return;        }   if(response.Status!=0){       console.error("服务端异常:",response.Msg);      this.eMsg="服务端异常"+response.Msg;      return;          }     if(response.Data==""){      this.eMsg="没有找到相应的照片"+response.Msg;    return;        }              this.imageData="data:image/jpg;base64,"+response.Data;     this.isShow=true;      },   error=>{   //错误的回调   if(error=="timeout"){     this.eMsg="请求超时，请稍后再试";     return;        }     this.eMsg="请求错误，错误原因:"+error;     console.error(error);   }  )  }

但只完成以上部分，只是知道有错误反馈，明确的错误还是不清楚，所以还需要设计一个错误处理器。
该错误处理器则是上面官方文档提到的configService服务类中自定义的handleError(error:HttpErrorResponse)函数,其参数的类型是HttpErrorResponse类型，它包含了这个错误中一些很有用的信息。
错误的信息分为两种：

服务端出错：后端返回了一个失败的返回码（如 404、500 等），它会返回一个错误响应体。
客户端出错：在客户端这边出了错误（比如在 RxJS 操作符 (operator) 中抛出的异常或某些阻碍完成这个请求的网络错误），就会抛出一个 Error 类型的异常。
HttpClient会在HttpErrorResponse中捕获所有类型的错误信息
文档示例：

private handleError(error: HttpErrorResponse) {if (error.error instanceof ErrorEvent) {// 发生客户端或网络错误，做相应处理  console.error('An error occurred:', error.error.message);} else {//后端返回一个不成功的响应代码及错误响应体，做相应处理console.error(`Backend returned code ${error.status}, ` +`body was: ${error.error}`);}// 返回一个带有面向用户的错误消息的观察对象(observable对象)return throwError('Something bad happened; please try again later.');
};

**解释:if中条件成立则是客户端错误，否则else服务端错误,最后返回一个observable对象
对于文档例子举详细例子:

private handleError(error:HttpErrorResponse){//错误处理函数   if(error.error instanceof ErrorEvent){   console.error('something wrong:'+'An error occurred',JSON.stringify   (error.message));    }   else{     if(JSON.stringify(error.name)==`"TimeoutError"`){    return throwError('timeout'); }   console.error('something unsuccessful:'+`Backend returned code ${error.status},` +`body was: ${JSON.stringify(error.message)}`); }  return throwError(JSON.stringify(error.message)); };

从上面我们获得了HttpClient方法返回的Observable对象，并把它们通过管道传给错误处理器。

文档示例：
getConfig() {return this.http.get<Config>(this.configUrl).pipe(catchError(this.handleError));
}

**解释：this.handleError即上面定义的错误处理器
对于文档例子举详细例子:

getService(api:string){   if(api==null||api==""){     let error="api is null"; console.error(error);    return;    }  return this.http.get(api)//如果api不为空，则返回http的请求函数.    //通过一个管道来定义超时的时间和把错误传给一个自定义的错误处理函数 handleError()。    .pipe(//管道传送错误   timeout(6*1000),  //timeout是Rxjs库的方法catchError(this.handleError)    )  };

将我举得例子放在一起可能会更易懂。。。。

前端网络请求的错误处理相关推荐

Spring Boot + Vue 前后端分离开发，前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
搭建前端网络请求模块
HTTP 超文本传输协议发送一个请求查询用户日志记录请求响应请求方式有哪些? 响应码有哪些? 客户端请求后,服务器响应携带的 https 证书常用加密算法快速搭建 Vue 普通 H5 项目 ...
服务器返回的响应数据无效,Ant Design Pro 5 网络请求和错误处理
Ant Design Pro 5 的网络请求有点复杂,只看文档不阅读源码搞不清楚到底发生了什么事情.涉及到fetch umi-request @umijs/plugin-request Ant Des ...
网络请求未知错误 CLEARTEXT communication to XX not permitted by network security policy 解决方案
这里简单的用了聚合免费的接口写了一个demo,专门来解决这个bug 搭建完MVP框架后,设置baseUrl开始请求.找了好久感觉没问题,后来查了资料才知道,是我们的baseUrl的问题因为是内部测试 ...
前端网络请求详细介绍
前端：uniapp封装网络请求笔记
uniapp作为开发移动端的前端框架,目前国内是非常流行的,使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序.APP等移动端程序,大大降低了移动开发的成本.网络请求更 ...
苹果执行请求时出错_iOS网络请求错误整理
在iOS开发中经常会遇到网络请求的错误, 一方面可能会是自己网络请求的方式, 参数, 请求头等造成的; 另一方面可能就是后台写的接口出了问题; 所以看懂报错原因就显得尤为重要. 一. iOS错误状态码 ...
前端发起请求，后端响应请求的整个过程
文章目录前端注册页面 axios 请求方法 URL 路径配置自定义 axios 方法封装后端创建服务器模块接口方法模块连接数据库本文分为:前端.后端两部分讲诉.以下是前端发送请求到服务 ...
Sagit.Framework For IOS 开发框架入门教程6：网络请求STHttp
前言: IOS的文章,今天,再来补一篇,Sagit的教程: 虽然感觉IOS的文章没什么观众,还是努力写吧,-_-〜 Sagit 开源地址:https://github.com/cyq1162/Sagi ...

前端网络请求的错误处理

前端网络请求的错误处理相关推荐

最新文章

热门文章