前端网络请求的错误处理

错误处理：当客户端发起一个请求，但无法从服务端得到正确响应，倘若没有错误处理进行提示，那么我们将很难找到出现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)    
        )  };

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

前端网络请求的错误处理

猜你喜欢