木灵鱼儿

木灵鱼儿

阅读：694

最后更新：2021/02/02/ 11:07:49

fetch 请求报错处理思路

之前写过一片使用fetch下载文件的方法，但是如果后端返回一个错误对象，使用response.blob()会将这个错误对象直接转为blob对象，然后被转为文件下载下来。

但实际上我们是要区分处理的，比如是文件流我们就下载文件，是错误对象，我们就进行错误提示和抛出错误。

所以这里，我主要分享下我对错误处理的思路。

基础知识

首先，在fetch第一个then回调中，我们可以对response对象进行三种方法操作：

  1. response.text 返回的是一个纯文本 是一个promise对象
  2. response.json 返回的是一个对象（json/array） 是一个promise对象
  3. response.blob 返回一个blob对象，是一个promise对象

三个方法对应后端返回的不同类型，但是需要注意的是response对象只能被上面三种方法中的某一个操作一次；也就是说你text操作了，就不能再json或者blob，否则会报错的。

这就导致，我们没办法直接通过这三个方法进行判断了，比较可惜。

了解这个基本前提，我们还需要知道后端返回的错误对象是什么？

{code: 0,msg: "错误信息",data: null}

一般来说，后端返回的基本都是这种格式，那么我们的重点就是如何区分后端返回的是一个错误对象还是文件流。

区分后端返回的是错误对象还是文件流

这个问题我昨天还在群里问了大佬，大佬给的方案是判断响应头类型。

我试了下，判断头信息是可行的，我这边的项目测试，返回的类型如下：

后端返回错误对象的头类型

application/json; charset=utf-8

后端返回文件流的头类型

text/html; charset=utf-8

不同的项目，返回的类型也是不同的，这个就需要大家自己去看下自己后端返回的是啥类型了。

判断代码

fetch(...省略).then(async response => {
  //根据头信息协议判断后端返回的内容
  const type = response.headers.get("content-type");
  if (type.startsWith("application/json")) {
    ...后端报错了
    //后端报错了
    const errorObj = await response.json();
    return Promise.reject(errorObj);
  }else if (type.startsWith("text/html")) {
    //文件流  
    return response.blob();
  }else {
    //其他
    const err = new Error("下载文件的请求发生错误！");
    throw err;
  }
}).then(blob => {
  //返回blob
  ...省略
}).catch(err => {
  //返回错误
  ...省略
})

这样我们就可以针对不同的返回内容进行判断，如果不是文件流，我们可以获取到后端返回的错误对象，拿到msg属性，进行错误提示，后端的错误对象就是上面的errorObj

以上就是我对fetch请求错误的处理思路。

文章分类 JavaScript
文章标签 textjsonjavascriptfetch下载文件blob错误处理头信息
木灵鱼儿

木灵鱼儿

发布了 562 篇文章获得点赞 0获得阅读 694

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 694

相关文章

scss 自动生成margin和padding的classscss 自动生成margin和padding的class
深度合并对象的方法深度合并对象的方法
vue 过滤器 驼峰与短横线相互转换的方法vue 过滤器 驼峰与短横线相互转换的方法
利用JSON过滤对象和数组中指定的key属性利用JSON过滤对象和数组中指定的key属性
使用vue.draggable拖拽组件遇到的一些问题使用vue.draggable拖拽组件遇到的一些问题