网络请求 Fetch

Overview

Fetch 是 W3C 的一种请求标准；不是第三方库，与 Vue、JQuery 无关
是原生的 JavaScript，是 Window 的方法，属于 BOM 范畴
下一代 Ajax 技术，基于 Promise 方式处理数据 - 返回结果是 Promise
语法简介明了；除了IE，多数浏览器都兼容
既可以访问远程数据，也可以访问本地数据
需要拼接参数；需要二次封装
以下各案例使用回调函数 callback，简化代码可以使用异步等待 asyn-await
更多信息，请访问 Using_Fetch、 MDN - fetch、 Fetch_API、接口调用 - fetch、 fetch - 请求数据

fetch(url)

console.dir(fetch)

Syntax

拿到数据需要 2次处理
第一个 then() 返回的 Response 对象，包含了一些元数据和方法，但不直接包含请求返回的实际数据；要获取实际的 JSON 数据，需要调用 res.json() 方法将 Response 对象解析为 JSON 数据，并返回一个新的 Promise
第二个 then() 处理解析后的 JSON 数据
在响应的原型[[Prototype]] Response中，可以看到相关的函数，他们仍然是一个 Promise 对象，所以需要 2次返回才能拿到结果

fetch( url, {
  method: '',
  headers: {
    'Content-Type': 'application/json'
  },
  body: ''
} )
  .then( res => res.json() )
  .then( res => {
    console.log( 'success ', res )
  } )

Configuration

method（String）：HTTP 请求方法，Get 获取数据 | Post 提交数据 | Delete 删除数据 | Put 更新数据；默认为 GET
body（String）：HTTP 请求的参数；POST 时使用
headers（Object）：HTTP 请求头，如 content-type 的常见值为 application/json、application/x-www-form-urlencoded

如果数据是 json 格式，可以省略 header 配置项；具体还要看服务器端的适配情况

Response

. 根据请求的数据类型，返回的结果分别有：

res.json()：得到 JSON 对象，同 JSON.parse(responseText) 一样；应用最广泛
res.text()：得到文字|字符串
res.formData()：得到 FormData 表单对象
res.blob()：得到 Blob对象，如图片等多媒体对象

[] 获取本地/远程 .json 数据 - 在开发者视图的控制台查看获取结果

多数静态托管平台做了代理，可以直接访问；否则需要进行代理处理；详细操作请参考 fetch with json - Bilibili

fetch('https://glpla.github.io/utils/data/rank/20240203.json')
  .then(res => res.json())
  .then(res => console.log(res))

[] text()

请求本地/远程文本文件 .txt

fetch('./tmp.txt')
  .then(res => res.text())
  .then(res => console.log(res))

请求本地/远程 .html，实现模块化；不需要写完整的 html 结构，只写业务结构即可；见底部版权

fetch('../../common/drill.html')
.then(res => res.text())
.then(res => {
  document.getElementById('require').innerHTML = res;
})

[] formData() - 请求表单

[] blob() - 请求图片并渲染

fetch('https://glpla.github.io/utils/avatar/avatar0.png')
  .then(res => res.blob())
  .then(res => img.src = URL.createObjectURL(res))

指定 accept 获取特别类型的图片，如去除水印、获取特定类型的图片 - 和浏览器和后端服务器有关
默认图片，url是png，另存为是avif

https://png.pngtree.com/recommend-works/png-clipart/20250101/ourmid/pngtree-cartoon-deer-standing-png-image_14982249.png

指定获取为png

fetch('https://png.pngtree.com/recommend-works/png-clipart/20250101/ourmid/pngtree-cartoon-deer-standing-png-image_14982249.png', {
  headers: {
    'Accept': 'image/png'
  }
})
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    img.value = url;
    console.log(img.value);

  })
  .catch(error => console.error('Error:', error));

使用 catch()捕获异常；完整使用

try {
  tryStatements
} catch (exceptionVar) {
  catchStatements
} finally {
  finallyStatements
}

捕获的情况

. 网络层面失败，无法发起或完成请求 - A Fetch API promise will be rejected only in case of network failure.

网络连接失败
DNS解析失败

无法捕获的情况

404：资源不存在
500：服务器本身存在问题，如服务器端代码执行出错、数据库连接失败、服务器配置问题，而不是客户端请求的问题

解决方案

根据响应状态 ok 判断

ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "xxx"

fetch('xxx')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

根据状态码 status 判断

ok: false
redirected: false
status: 404
statusText: "Not Found"
type: "cors"
url: "xxx"

fetch('xxx')
  .then(response => {
    if (response.status >= 500 && response.status < 600) {
      throw new Error(`Server error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

完整请求

fetch('xxx')
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok ' + response.statusText);
  }
  return response.json();
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('There was a problem with the fetch operation:', error);
})
.finally(() => {
  console.log('Fetch operation completed.');
});