前端网络基础 - fetch

心已赠人 2023-10-01 19:26 6阅读 0赞

**目录**

XMLHttpRequest缺点

fetch的优点

fetch的请求和响应设计

Request

Response

fetch函数的用法

fetch取消请求

fetch的异常结果

fetch和axios的区别

--------------------

### XMLHttpRequest缺点 ###

浏览器提供了原生的AJAX实现类XMLHttpRequest，基于该类实例，我们可以实现在网页上发送AJAX请求到服务端。

但是XMLHttpRequest的设计并不完美，主要体现在以下几个方面：

*  HTTP请求，响应都被耦合在XMLHttpRequest实例上，结构不够简单明了
 *  采用事件回调的方式获取HTTP响应，可能会产生回调地狱
 *  如果HTTP响应数据过大，则会占用大量内存
 *  最后一点就是，XMLHttpRequest实现AJAX的步骤太零碎了

我们分别举例说明下

const xhr = new XMLHttpRequest()
    
    xhr.open('post', 'http://localhost:3000/test')
    
    xhr.setRequestHeader('Content-Type', 'application/json')
    
    xhr.responseType = 'json'
    
    xhr.send(JSON.stringify({
        name: 'qfc',
        age: 18
    }))
    
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 300){
                console.log(xhr.status)
                console.log(xhr.statusText)
                console.log(xhr.getAllResponseHeaders())
                console.log(xhr.response)
            }
        }
    }

通过以上代码，我们发现，HTTP请求URL，请求METHOD，请求HEAD，请求BODY，全部依赖于xhr的方法进行设置，HTTP响应状态码，状态描述，响应HEAD，响应BODY，也全部依赖于xhr来获取，这其实不符合高内聚，低耦合要求，我们期望将HTTP请求所有的信息封装在一起，将HTTP响应的所有信息封装在一起。

// 下面案例是 先查询订单123的信息，再根据订单123信息中productId去查询商品信息
    const xhr = new XMLHttpRequest()
    xhr.open('get', 'http://localhost:3000/order/123')
    xhr.responseType = 'json'
    xhr.send()
    
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 300){
    
                const xhr2 = new XMLHttpRequest()
                xhr2.open('get', `http://localhost:3000/product/${xhr.response.productId}`)
                xhr2.responseType = 'json'
                xhr2.send()
                xhr2.onreadystatechange = function(){
                    if(xhr2.readyState === 4) {
                        if(xhr2.status >= 200 && xhr2.status < 300) {
                            console.log(xhr2.response)
                        }
                    }
                }
                
            }
        }
    }

上面代码就是典型的回调地狱式的异步串行案例。我们期望基于Promise\#then的链式串行，或者更进一步的async await异步任务同步化执行。

XMLHttpRequest实例自身有一个属性readyState，该属性有如下几个值

*  0：xhr实例创建
 *  1：xhr.open调用
 *  2：xhr.send调用
 *  3：xhr收到部分HTTP响应
 *  4：xhr收到全部HTTP响应

而当xhr.readyState属性值改变时，就会触发xhr.onreadystatechange事件，我们通过监听该事件，就可以知道HTTP响应是否已被收到，收到的HTTP响应会被挂载到xhr实例上，我们可以通过xhr.status,xhr.statusText，xhr.getAllResponseHeaders()，xhr.response来获得HTTP响应信息。

但是xhr并没有实现流式获取HTTP响应，即无法分块获取HTTP响应，当HTTP响应过大时，需要占用对应大小的内存，将HTTP响应全部缓存再内存中，这是内存不友好的。

### fetch的优点 ###

fetch和XMLHttpRequest一样，也是浏览器原生的，用于发送AJAX请求。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1][] 但是fetch是在XMLHttpRequest之后诞生的，它旨在解决XMLHttpRequest的不足，所以XMLHttpRequest的缺点就是它的优点，具体优点如下

*  语法简单，结构清晰明了
 *  支持Promise获取异步的HTTP响应
 *  HTTP响应支持流式获取，内存友好

fetch被设计为函数，通过fetch函数调用即可发起AJAX，而不需要像XMLHttpRequest那样创建实例，然后基于xhr实例发起AJAX。

fetch('http://localhost:3000/test') // fetch函数调用即发起AJAX

fetch函数返回一个Promise对象，而Promise对象的结果值就是HTTP响应

fetch('http://localhost:3000/test').then(response => { // fetch函数返回值是一个Promise类型对象
        console.log(response) // 该Promise对象的结果值response就是HTTP响应
    })

fetch函数返回的Promise对象的结果值HTTP响应是流式获取，即使HTTP响应数据很大，也不会占用过多的内存。

### fetch的请求和响应设计 ###

fetch将HTTP请求信息封装在一个Request类中，将HTTP响应封装在一个Response类中，Request和Response类都是浏览器原生的，我们可以直接使用。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

例如：fetch函数返回的Promise对象的结果值response就是Response类的实例

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

例如：我们可以创建一个Request对象，作为fetch函数入参

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

下面将详细介绍Request,Response

#### Request ####

[Request() - Web API 接口参考 | MDN (mozilla.org)][Request_ - Web API _ _ MDN _mozilla.org]

>     var myRequest = new Request(input[, init]);

Request构造函数语法如上

input是必选参数，一般传入URL字符串，如'http://localhost:3000/test'，或者传入一个Request对象

init是可以选参数，需要传入一个对象，对象可以包含如下属性

<table style="width:689px;"> 
 <tbody> 
  <tr> 
   <td style="width:157px;">method</td> 
   <td style="width:528px;">HTTP请求方法</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">headers</td> 
   <td style="width:528px;">HTTP请求头</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">body</td> 
   <td style="width:528px;">HTTP请求体。可以是<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob" title="Blob" rel="nofollow">Blob</a>,&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/BufferSource" title="BufferSource&nbsp;(en-US)" rel="nofollow">BufferSource&nbsp;(en-US)</a>,&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FormData" title="FormData" rel="nofollow">FormData</a>,&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams" title="URLSearchParams" rel="nofollow">URLSearchParams</a>,&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/USVString" title="USVString" rel="nofollow">USVString</a>，或<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream" title="ReadableStream" rel="nofollow">ReadableStream</a>对象。</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">mode</td> 
   <td style="width:528px;"> <p>请求的模式</p> 
    <ul> 
     <li><code>cors</code>：默认值，允许跨域请求。</li> 
     <li><code>same-origin</code>：只允许同源请求。</li> 
     <li><code>no-cors</code>：请求方法只限于 GET、POST 和 HEAD，并且只能使用有限的几个简单标头，不能添加跨域的复杂标头，相当于提交表单所能发出的请求。</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="width:157px;">credentials</td> 
   <td style="width:528px;"> <p>是否发送 Cookie</p> 
    <ul> 
     <li><code>same-origin</code>：默认值，同源请求时发送 Cookie，跨域请求时不发送。</li> 
     <li><code>include</code>：不管同源请求，还是跨域请求，一律发送 Cookie。</li> 
     <li><code>omit</code>：一律不发送。</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="width:157px;">cache</td> 
   <td style="width:528px;"> <p>HTTP缓存设置</p> 
    <ul> 
     <li><code>default</code>：默认值，先在缓存里面寻找匹配的请求。</li> 
     <li><code>no-store</code>：直接请求远程服务器，并且不更新缓存。</li> 
     <li><code>reload</code>：直接请求远程服务器，并且更新缓存。</li> 
     <li><code>no-cache</code>：将服务器资源跟本地缓存进行比较，有新的版本才使用服务器资源，否则使用缓存。</li> 
     <li><code>force-cache</code>：缓存优先，只有不存在缓存的情况下，才请求远程服务器。</li> 
     <li><code>only-if-cached</code>：只检查缓存，如果缓存里面不存在，将返回504错误。</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="width:157px;">redirect</td> 
   <td style="width:528px;">对重定向处理的模式：&nbsp;<code>follow</code>,&nbsp;<code>error</code>, or&nbsp;<code>manual</code>。在Chrome中，Chrome 47 之前的版本默认值为&nbsp;<code>manual</code>&nbsp;，自Chrome 47起，默认值为<code>follow。</code></td> 
  </tr> 
  <tr> 
   <td style="width:157px;">referrer</td> 
   <td style="width:528px;">&nbsp;用于设定<code>fetch()</code>请求的<code>referer</code>标头</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">referrerPolicy</td> 
   <td style="width:528px;"> <p>用于设定<code>Referer</code>标头的规则</p> 
    <ul> 
     <li><code>no-referrer-when-downgrade</code>：默认值，总是发送<code>Referer</code>标头，除非从 HTTPS 页面请求 HTTP 资源时不发送。</li> 
     <li><code>no-referrer</code>：不发送<code>Referer</code>标头。</li> 
     <li><code>origin</code>：<code>Referer</code>标头只包含域名，不包含完整的路径。</li> 
     <li><code>origin-when-cross-origin</code>：同源请求<code>Referer</code>标头包含完整的路径，跨域请求只包含域名。</li> 
     <li><code>same-origin</code>：跨域请求不发送<code>Referer</code>，同源请求发送。</li> 
     <li><code>strict-origin</code>：<code>Referer</code>标头只包含域名，HTTPS 页面请求 HTTP 资源时不发送<code>Referer</code>标头。</li> 
     <li><code>strict-origin-when-cross-origin</code>：同源请求时<code>Referer</code>标头包含完整路径，跨域请求时只包含域名，HTTPS 页面请求 HTTP 资源时不发送该标头。</li> 
     <li><code>unsafe-url</code>：不管什么情况，总是发送<code>Referer</code>标头。</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="width:157px;">intergrity</td> 
   <td style="width:528px;">&nbsp;指定一个哈希值，用于检查 HTTP 回应传回的数据是否等于这个预先设定的哈希值。比如，下载文件时，检查文件的 SHA-256 哈希值是否相符，确保没有被篡改</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">signal</td> 
   <td style="width:528px;">指定一个 AbortSignal 实例，用于取消<code>fetch()</code>请求</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">keepalive</td> 
   <td style="width:528px;">用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据。</td> 
  </tr> 
 </tbody> 
</table>

const req = new Request('http://localhost:3000/test', {
        method: 'post',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            name: 'qfc',
            age: 18
        })
    })
    
    fetch(req).then(res => {
        console.log(res)
    })

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

其中需要注意的是Request对象的body属性，该属性值支持

*  查询参数字符串，如'name=qfc&age=18'
 *  文本字符串，如'\{"name":"qfc", "age": 18\}'
 *  FormData对象
 *  Blob对象
 *  ReadableStream对象
 *  BufferSource对象

居然不支持普通JS对象，这让我过于意外，在如今application/json数据格式的天下，居然不默认支持将JS对象自动转为JSON字符串...

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

body传入普通JS对象，服务器直接报错了，因为服务器收到的是一个JS对象（二进制类型），而不是一个JSON字符串（文本类型），所以无法进行JSON解析，所以报错了。

#### Response ####

[Response - Web API 接口参考 | MDN (mozilla.org)][Response - Web API _ _ MDN _mozilla.org]

通常情况下，我们不手动构造一个Response实例，我们只需要了解Response的结构即可。

Response实例具有以下属性

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>status</td> 
   <td>HTTP响应状态码</td> 
  </tr> 
  <tr> 
   <td>statusText</td> 
   <td>HTTP响应状态描述</td> 
  </tr> 
  <tr> 
   <td>headers</td> 
   <td> <p>HTTP响应头，headers无法直接通过.来获取响应头，而要通过get方法来获取，原因时headers是Header类型，该类实现了Symbol.iterator，是一个可迭代对象，他需要通过get方法获取指定响应头</p> <p><img alt="" height="554" src="https://img-blog.csdnimg.cn/1601a19c2c004d638e7f8c8608d65bcd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16" width="1125"></p> <p>&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td>body</td> 
   <td>HTTP响应体。一个简单的 getter，用于暴露一个&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream" title="ReadableStream" rel="nofollow">ReadableStream</a>&nbsp;类型的 body 内容。</td> 
  </tr> 
  <tr> 
   <td>bodyUsed</td> 
   <td>包含了一个<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="布尔值&nbsp;(en-US)" rel="nofollow">布尔值&nbsp;(en-US)</a>来标示该 Response 是否读取过&nbsp;<code>Body</code>。</td> 
  </tr> 
  <tr> 
   <td>ok</td> 
   <td> <p>本次响应是否成功，true成功，false失败。</p> <p>判断标准是：HTTP响应状态码在200~299之间表示成功，其他表示失败</p> </td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td> <p>响应类型，有如下值：</p> 
    <ul> 
     <li><code>basic</code>: 标准值, 同源响应, 带有所有的头部信息除了“Set-Cookie” 和 “Set-Cookie2″.</li> 
     <li><code>cors</code>: Response 接收到一个有效的跨域请求.&nbsp;</li> 
     <li><code>error</code>: 网络错误. 没有有用的描述错误的信息。响应的状态为0，header为空且不可变。从&nbsp;<code>Response.error()</code>中获得的响应的类型.</li> 
     <li><code>opaque</code>: 响应&nbsp;“no-cors” 的跨域请求.</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>HTTP请求URL</td> 
  </tr> 
  <tr> 
   <td>redirected</td> 
   <td>表示该 Response 是否来自一个重定向，如果是的话，它的 URL 列表将会有多个条目。</td> 
  </tr> 
 </tbody> 
</table>

其中，我们需要注意的是body属性值是一个可读流，所以我们无法直接获取body内容，需要从可读流中读取内容，而读取可读流中内容也是一个异步操作，Response贴心的为我们提供了如下实例方法去异步地获取body可读流中的内容

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:165px;">json()</td> 
   <td style="width:333px;">读取body内容为JSON对象</td> 
  </tr> 
  <tr> 
   <td style="width:165px;">text()</td> 
   <td style="width:333px;">读取body内容为普通文本字符串</td> 
  </tr> 
  <tr> 
   <td style="width:165px;">formData()</td> 
   <td style="width:333px;">读取body内容为FormData对象</td> 
  </tr> 
  <tr> 
   <td style="width:165px;">blob()</td> 
   <td style="width:333px;">读取body内容为Blob对象</td> 
  </tr> 
  <tr> 
   <td style="width:165px;">arrayBuffer()</td> 
   <td style="width:333px;">读取body内容为ArrayBuffer对象</td> 
  </tr> 
 </tbody> 
</table>

以上方法都返回一个Promise对象，且Promise对象的结果值为它们读取到并转换为对应格式的数据。

async function test(){
        const response = await fetch('http://localhost:3000/test?name=qfc&age=18')
    
        console.log('bodyUsed:', response.bodyUsed)
        
        const body = await response.json()
    
        console.log(body)
    
        console.log('bodyUsed:', response.bodyUsed)
    
        const bodyAgain = await response.json()
        
        console.log(bodyAgain)
    }
    
    test()

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

通过以上代码测试发现，当response.json()返回的Promise的结果值确实是body实际内容，并且自动被转化为JSON对象。bodyUsed属性在json()执行后，也从false改变为了true，表示body内容读取过了。

需要注意的是，可读流的内容只能读取一次，读取完就没了，再次读取则会报错

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

如果我们想进行多次读取，则可以对可读流进行克隆，然后操作克隆的可读流，具体操作如下：

async function test(){
        const response = await fetch('http://localhost:3000/test?name=qfc&age=18')
    
        const clone1 = response.clone()
        
        const body = await clone1.json()
    
        console.log(body)
    
        const clone2 = response.clone()
    
        const bodyAgain = await clone2.json()
        
        console.log(bodyAgain)
    }
    
    test()

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

### fetch函数的用法 ###

前面介绍了Request和Response，我们知道了fetch可以入参一个Request对象，返回一个Response对象为结果值的Promise对象。

但是每次执行fetch，都创建一个Request对象显得有点麻烦，所以fetch函数支持如下语法：

>     Promise<Response> fetch(input[, init]);

fetch('http://localhost:3000/test', {
        method: 'post',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            name: 'qfc',
            age: 18
        })
    }).then(response => {
        console.log(response)
    })

即，fetch不需要入参一个标准的Request对象，而是将用于创建Request对象的入参转移到fetch函数的入参。

### fetch取消请求 ###

不同于XMLHttpRequest基于实例来取消请求，由于fetch没有提供发送AJAX的实例，所以fetch需要通过传入配置的方式，建立与底层发送AJAX的实例的联系。

浏览器原生提供了一个AbortController类，该类的原型上有一个signal属性，有一个abort函数

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

而fetch函数的第二个参数配置对象有一个属性signal，该属性用于接收一个AbortController实例的signal属性值，这也建立了fetch函数底层发送AJAX的实例与AbortController实例的联系。

而Abort实例通过调用abort即可引发fetch函数发送的AJAX取消。

const controller = new AbortController()
    
    fetch('http://localhost:3000/test', {
        signal: controller.signal
    }).then(response => {console.log(response)})
      .catch(err => {console.log('错误信息：', err)})
    
    setTimeout(()=>{controller.abort()}, 1000) // 服务器5s后返回

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 13][]

但是有一个很奇怪的地方，controller.abort是一个函数，居然不能直接作为setTimeout回调，而是需要封装到一个函数中，不知道为啥

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 14][]

而当controller.abort()执行后，fetch就会抛出一个DOMException，异常的name属性为AbortError

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 15][]

### fetch的异常结果 ###

fetch只将网络异常，如网络未接入，网络中断，服务器无法连接，当成真异常，而对于HTTP响应状态码不在200~299的情况都会被当成正常结果，而不是异常。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 17][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 18][]

我们再来看下异常响应的结构

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 19][]可以发现，fetch异常响应结果值就是一个TypeError对象，该对象自身有message,stack属性，原型上有一个name属性

### fetch和axios的区别 ###

二者最本质区别是

fetch是浏览器原生函数，axios是基于浏览器原生XMLhttpRequest封装的第三方库。

在请求设计上

fetch只能当成函数使用，axios不仅可以当成函数使用，也可以当成对象使用

fetch函数第一个入参不能是配置对象，axios可以是

fetch函数入参配置对象中请求体body不能直接传入普通JS对象，axios入参配置对象的data可以

在正常结果上

fetch返回的Promise结果值Response实例的body是一个可读流对象，需要异步读取

axios返回的Promise结果值中所有属性都可以同步获取

在异常结果上

fetch只将网络异常当成异常，对于服务器返回非 200~299 的HTTP响应，都看出正常结果

axios默认将非 200~299 的HTTP响应，看出是异常结果

另外fetch的异常结果对象有两种TypeError，DOMException，都是浏览器原生异常对象

而axios的异常对象都是自定义的对象，包含详细的异常信息

在取消请求上

fetch依赖于外部的AbortController实例来取消请求，通过AbortController实例的signal和fetch入参配置对象属性signal建立联系，然后通过AbortController实例调用abort方法完成取消请求。

axios依赖于外部的axios.CancelToken实例来取消请求，通过axios.CancelToken实例与axios入参配置对象属性cancelToken建立联系，然后axios内部将xhr.abort()执行权交给axios.CancelToken实例，通过axios.CancelToken再将得到的取消请求控制权再次交给用户，由用户把控取消请求

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f0232ce30b0a4214b8df60acdac258a4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/90f2f91a136448d2936845743363c3b9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/2d578d2ba71743bf9d0750bf80a7b6d6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/26ec4a7efa814ee3829526901c0cc53d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/7c7d74c95003443cba337c0a2621adb9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[Request_ - Web API _ _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Web/API/Request/Request
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/436e57ba7b02466993874169d7152950.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/503a19515cc8416db5c254a466c82db1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/50b01fead4cf40bc9a13a6942aa29693.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[Response - Web API _ _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Web/API/Response
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/8684c899aad549b388d5b367efbb75d7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/974f98d77d7d47078bf0df19ed7256e8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/f11e9037066045239f4a236b6dc0110d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/69a3cbe123e346be82fd2c10db423023.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/5938d73526dd4a4a9f86d93ae60f93a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/4390a43afc9949228f4cee0018284361.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/267e6dc3496145289faae0d7124fd94d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 15]: https://img-blog.csdnimg.cn/a0c7f42cba1645c6a542500e84b7554c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 16]: https://img-blog.csdnimg.cn/b0490ad7e1584ba2a1a30412a4a00945.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 17]: https://img-blog.csdnimg.cn/8558c2ff873b41258e536257625ad1e8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 18]: https://img-blog.csdnimg.cn/61d17830cf5f453e89ed5a5bb7451ef0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 19]: https://img-blog.csdnimg.cn/f0c52630454d4856b5a5fa9cbe66aad8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16