跳至主要內容

Fetch

wzCoding大约 6 分钟JavaScriptFetch

Fetch

fetch() 方法是JavaScript中用于发起获取资源的请求的内置方法。它返回一个Promise，这个Promise会在请求响应后被resolve，并传回Response对象。这是一种现代的替代传统的XMLHttpRequest的方法，它更加方便且易于使用

使用 fetch()

fetch() 方法的基本用法如下：

const result = await fetch(url,[options]);
//或者
fetch(url,[options])
.then(result=>console.log(result));

fetch() 方法的参数有两个：

  • url：要请求的URL
  • options：一个可选的配置对象，如果没有这个参数，那么 fetch() 方法会默认使用GET方法

options 配置

fetch() 方法的第二个参数是一个配置对象，它包含了一些可选的参数，用于控制请求的各个方面。这些参数包括：

参数类型描述
method字符串请求使用的方法，如 GET、POST
headersHeaders对象或对象字面量请求的头信息
bodyBlob、BufferSource、FormData、URLSearchParams 或 USVString 对象请求的body信息。注意GET或HEAD方法的请求不能包含body信息
mode字符串请求的模式，如 cors、no-cors 或者 same-origin
credentials字符串请求的credentials，如 omit、same-origin 或者 include
cache字符串请求的cache模式：default、no-store、reload、no-cache、force-cache 或者 only-if-cached
redirect字符串可用的redirect模式：follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误），或者 manual (手动处理重定向)
referrerUSVString一个USVString可以是 no-referrer、client 或一个 URL。默认是 client
referrerPolicy字符串指定了HTTP头部referer字段的值
integrity字符串包括请求的subresource integrity值
keepalive布尔值启用keepalive连接。默认是false
signalAbortSignal用于取消请求的AbortSignal对象

method

method 参数用于指定请求的方法，可以是以下值之一：

  • GET：默认方法，表示获取资源
  • POST：表示发送实体到服务器
  • PUT：表示替换服务器上的资源
  • DELETE：表示删除服务器上的资源
  • HEAD：表示获取资源的响应头
  • OPTIONS：表示获取信息，关于资源的哪些属性是客户端可以改变的
  • TRACE：表示回显服务器收到的请求，主要用于测试或诊断
  • CONNECT：表示建立一个到由目标服务器指定的网络端口的隧道

headers

headers 参数用于指定请求的头部信息，它是一个对象，其中的每个属性都是请求头部的一个属性

body

body 参数用于指定请求的实体部分，它可以是一个字符串、Blob、BufferSource、FormData或URLSearchParams对象

mode

mode 参数用于指定请求的模式，它可以是以下值之一：

  • cors：跨源请求
  • no-cors：不进行跨源请求
  • same-origin：同源请求

credentials

credentials 参数用于指定请求的凭据（credentials）如何发送，它可以是以下值之一：

  • include：发送凭据
  • same-origin：仅发送同源凭据
  • omit：不发送凭据

cache

cache 参数用于指定请求的缓存模式，它可以是以下值之一：

  • default：默认缓存模式
  • no-store：不缓存请求
  • reload：每次都重新发送请求
  • no-cache：不缓存请求，但会检查缓存是否过期
  • force-cache：强制使用缓存
  • only-if-cached：只使用缓存，不发送请求

redirect

redirect 参数用于指定在发生重定向时如何处理，它可以是以下值之一：

  • follow：自动重定向
  • error：如果发生重定向，则返回一个错误
  • manual：手动处理重定向

referrer

referrer 参数用于指定请求的referer字段的值，它可以是以下值之一：

  • no-referrer：不发送referer字段
  • client：发送原始请求的URL
  • url：发送请求的URL

referrerPolicy

referrerPolicy 参数用于指定请求的referrerPolicy字段的值，它可以是以下值之一：

  • no-referrer：不发送referrer字段
  • no-referrer-when-downgrade：如果从HTTPS请求降级为HTTP请求，则不发送referrer字段
  • origin：只发送在 Referer 中的域，而不是完整的页面 URL
  • origin-when-cross-origin：发送完整的 Referer 到相同的源，但对于跨源请求，只发送域部分
  • unsafe-url： 在 Referer 中始终发送完整的 url，即使是 HTTPS→HTTP 请求
  • strict-origin： 只发送域，对于 HTTPS→HTTP 请求，则不发送 Referer
  • strict-origin-when-cross-origin：对于同源情况下则发送完整的 Referer，对于跨源情况下，则只发送域，如果是 HTTPS→HTTP 请求，则什么都不发送
  • same-origin：发送完整的 Referer 到相同的源，但对于跨源请求，不发送 Referer

integrity

integrity 参数用于指定请求的integrity字段的值，它可以是以下值之一：

  • sha256-hash：发送sha256-hash字段
  • sha384-hash：发送sha384-hash字段
  • sha512-hash：发送sha512-hash字段
  • sha1-hash：发送sha1-hash字段
  • md5-hash：发送md5-hash字段
  • md5：发送md5字段
  • sha256：发送sha256字段
  • sha384：发送sha384字段
  • sha512：发送sha512字段
  • sha1：发送sha1字段
  • none：不发送integrity字段

keepalive

keepalive 参数用于指定请求在网页关闭后是否继续发送，它可以是以下值之一：

  • true：网页关闭后仍然发送请求（但是请求成功后的处理函数无法执行，因为文档 Docuemnt 已被卸载）
  • false：网页关闭后不发送请求

signal

signal 参数用于指定一个 AbortSignal 对象，用于取消请求。

中止 fetch()

fetch() 方法会返回一个Promise对象，而在 JS 中，并没有中止 Promise 的概念，如果我们想要中止 fetch() 请求，那应该怎么办呢？

AbortController 对象

为了实现中止 fetch() 请求的功能，JS提供了一个特殊的内置对象 AbortController，AbortController 对象不仅可以中止 fetch 请求，还可以中止其他需要使用 Promise 的异步操作。 AbortController 对象包含两个属性：signal 和 abort()

  • signal：返回一个 AbortSignal 实例对象，该对象上有一个 aborted 布尔属性，表示请求是否被中止，还有 abort() 方法，该方法触发 abort 事件，并将 aborted 属性设置为 true，表示中止了请求
  • abort()：触发 abort 事件，并将 signal属性返回的对象上的 aborted 属性设置为 true

中止 fetch() 请求

fetch() 方法能够很好的配合 AbortController 对象使用，在 fetch() 方法的配置选项中就有 signal 属性，它接受一个 AbortSignal 对象作为参数，fetch() 方法内部实现了对 abort() 事件的监听，我们可以通过 AbortController 对象来中止 fetch() 请求

const controller = new AbortController();
const signal = controller.signal;

fetch('https://example.com', { signal })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => {
        if (error.name === 'AbortError') {
            console.log('请求已中止');
        } else {
            console.error('请求出错:', error);
        }
    });

// 中止请求
controller.abort();

中止 Promise 异步操作

我们可以在 Promise 内部监听 abort 事件，当 abort 事件触发时，我们可以直接使用 reject 来结束 Promise ，从而中止异步操作

const controller = new AbortController();
const signal = controller.signal;

// 异步操作
const promise = new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
        resolve('操作成功')
    }, 2000);
    // ...
    signal.addEventListener('abort', reject);
});

// 绑定 signal 对象
promise
    .then(result => console.log(result))
    .catch(error => {
         console.error('中止异步操作:', error);
    });

// 中止操作
controller.abort();
ℹ️提示

更多关于 AbortController 和 AbortSignal 的信息可以前往 AbortController

MIT LICENSE | copyright © 2023-present wzCoding