Fetch 的基本使用

小孔_H

于 2024-08-14 00:15:24 发布

阅读量710

点赞数 22

文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/qq_73220073/article/details/141177041

版权

Fetch 的基本使用

1. fetch 的基本使用: fetch(请求地址,配置项) --> 返回一个 promise 实例 --> const p = fetch(请求地址,配置项)

当请求成功时 p 的状态时 fulfilled 值是请求回来的内容，当请求失败时 p 状态未 rejected 值为失败原因
fetch 与 axios 有个不一样的地方:
- 在 fetch 中只要服务器有反馈信息（无论HTTP状态码时多少），都说明网络请求成功，最后 p 都是 fulfilled，只有服务器没有反馈（例如: 请求中断、请求超时、断网等）实例 p 才是 rejected
- 在 axios 中只有返回的状态码是以 2 开始的，才会让实例是成功状态
- ```
fetch("http://47.121.143.202:3000/banner?type_id=0")
    .then(response => {
        console.log("请求成功:", response);
    })
    .catch(reason => {
        console.log("请求失败:", reason);
    })
```

2. fetch 配置项（常见）:

(1) method: 请求方式（*GET, POST, PUT, DELETE, HEAD...）
(2) mode: 请求模式（*cors, no-cors, same-origin）--> no-cors: 不允许跨域代理 / same-origin 同源 / core: 支持跨域代理 --> 注意该配置通常不需要去修改，使用默认的 "core" 即可
(3) cache: 缓存模式（*default, no-cache, reload, force-cache, only-if-cached）
(4) credentials: 资源凭证（例如: cookie）（include, *same-origin, omit） --> 如: 浏览器在发送请求时，默认会在请求头中发送 cookie 信息
- fetch 默认情况下在跨域请求中，是不允许携带资源凭证的，只有同源下才允许，也可以通过该配置进行对应的设置
- include: 同源和跨域情况下都可以
- same-origin: 只有同源下才可以
- omit: 都不发送（不可以）

(5) header: 自定义请求头信息（普通对象 / Header类实例<如 Content-Type ...>）

// 使用普通对象
    fetch("http://47.121.143.202:3000/banner?type_id=0", {
        headers: { // -- 普通对象
            'Content-Type': "application/json"
        }
    })
        .then(response => {
            console.log("请求成功:", response);
        })
        .catch(reason => {
            console.log("请求失败:", reason);
        })

// 使用 Header 类的实例
    /** Header 类: 请求头或响应头处理 --> Header.prototype 常用方法
        + append: 新增头信息
        + delete: 删除头信息
        + forEach: 迭代获取都信息
        + get: 获取某一项头信息
        + has: 验证是否包含某一项
        + ...
    */
    const headers = new Headers() // -- header 类实例
    headers.append("Content-Type", "application/json")

    fetch("http://47.121.143.202:3000/banner?type_id=0", {
        headers // -- 使用 headers 实例
    })
        .then(response => {
            console.log("请求成功:", response);
        })
        .catch(reason => {
            console.log("请求失败:", reason);
        })

(6) body: 设置请求主体信息 --> 🔺注意: 该参数只适用于 POST 系列请求，在 GET 系列请求中设置 body 会报错（返回的实例也会变成 rejected 失败状态） --> 🔺且 body 内容的格式是有要求的，并且需要手动在请求头（header）中指定 "Content-Type" 的请求头信息，主要有以下几种方式:
- <1> JSON 字符串（Content-Type: application/json）
  - ```
  // 示例:
      '{"name":"xxx","age":14,...}'  | JSON.stringify({ name: "xxx", age: 18, ... })
```
- <2> URLENCODED 字符串（Content-Type: application/x-www-form-urlencoded）
  - ```
  // 示例:
      "xxx=xxx&xxx=xxx"
```
- <3> 普通字符串（Content-Type: text/plain）
- <4> FormData 对象（Content-Type: multipart/form-data） --> 主要运用在文件上传(或者表单提交)的操作中（FormData类: 后续学习）
- <5> 二进制或Buffer格式
- 注意: 不能使用普通对象
- ...
(7) signal: 用于请求中断...
(8) 相比较于 axios 来讲，fetch 没有对 GET 系列请求 "查询字符串传参/问好传参" 的信息做特殊处理，需要手动在请求地址 url 字符串里进行拼接对应的 GET 系列请求参数

3. fetch responce 对象（Response 类的实例）:

1. 私有属性:
- body: 响应主体信息，即服务器响应的主体信息
  - 🔺但在 response 中的 body 是一个 ReadableStream 可读流信息，并非是真正我们想要的响应信息，需要通过 response 原型上的方法进行解析，才能拿到真正的数据 ↓
- header: 响应头信息（Header 类的实例）
- status/statusText: 返回的 HTTP 状态码及描述
- redirected: 是否重定向 <type:boolean>
- ...
2. Response.prototype: 有如下常用的几个方法，这些方法主要用于处理 body 可读流信息的，用于把可读流信息转换为我们自己想要的格式后进行返回，返回的时 promise（值就为服务器真正响应的数据信息，即我们想要的格式的 body） 为什么返回的是promise实例: 返回值是一个promise实例，这样可以避免，服务器返回的信息在转换中出现问题(例如:服务器返回的是一个流信息，我们转换为ison对象肯定是不对的，此时可以让其返回失败的实例即可)
- json
  - ```
  fetch("http://47.121.143.202:3000/banner?type_id=0",)
      .then(response => response.json()) // -- 返回解析后的 body 信息数据
```
- arrayBuffer
- blob
- formData
- text

3. 代码示例:

fetch("http://47.121.143.202:3000/banner?type_id=0",)
    .then(response => {
        console.log("请求成功:", response);

        const { headers,status } = response // -- 从 response 中获取 header、status ...

        // -- 判断是否请求成功: 因为进入THEN中的时候，不一定是请求成功「因为状态码可能是各种情况」
        const { status, body } = response
        if (/^(2|3)\d{2}$/.test(status)) { // -- 当状态码是以 2 | 3 开头的三位数字时，这才是真正的成功 --> 返回服务器响应的数据
            return response.json() // -- 🔺返回 response 通过通过对应原型上的方法解析后的数据信息（服务器真正返回的数据信息）
        }

        // -- ↑ 状态码不对: 获取数据失败，使其进入 catch 方法中
        return Promise.reject({
            // -- 根据服务器接口返回的数据格式，定义对应的自定义服务器请求错误信息，返回至 catch 方法中
        })
    })
    .then(res => {
        console.log(res);
    })
    .catch(reason => {
        // -- 失败情况: 服务器没有返回任何信息 / 状态码不对 / 数据转换失败
        console.log("请求失败:", reason);
    })

4. fetch 中请求中断处理: 需要借助 JS 中的 AbortController 类的实例进行实现

AbortController 实例:
- 实例属性 signal: 中断信号
- 实例方法 abort: 执行该方法，会根据请求的请求头配置的 signal 属性为该类中的 signal 实例属性，进行对应请求的中断

基本使用代码演示:

const control = new AbortController() // -- 1. 创建 AbortController 类实例

fetch("http://47.121.143.202:3000/banner?type_id=0", {
    signal: control.signal // -- 2. 配置请求头中的 signal 属性 --> 请求中断信号 --> 当调用 control 中的 abort 方法时，会立即中断请求
})
    .then(response => {
        console.log("请求成功:", response);
    })
    .catch(reason => {
        console.log("请求失败:", reason); // -- 中断请求打印内容 --> 请求失败:DOMException: signal is aborted without reason
    })

control.abort() // -- 3. 当调用 AbortController 中的 abort 实例方法时，会中断上面的请求