> 文章列表 > 【JavaScript】Fetch使用说明

【JavaScript】Fetch使用说明

【JavaScript】Fetch使用说明

fetch 方法是一种用于发送和接收网络请求的新 API,返回一个 promise
可替代传统的XMLHttpRequest 对象,具有更简单、更灵活和更强大的功能。

兼容性

【JavaScript】Fetch使用说明

语法

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

返回值

一个 Promise,resolve 时回传 Response 对象。

  • 例外
类型 描述
AbortError 请求被AbortController.abort()终止。
TypeError 从Firefox 43 (en-US)开始,如果fetch()接收到含有用户名和密码的 URL(例如http://user:password@example.com),它将会抛出一个TypeError

参数

参数名 是否必填 说明
input 一个 USVString 字符串,包含要获取资源的 URL(一些浏览器会接受 blob: 和 data: 作为 schemes).
一个 Request 对象。
init 一个配置项对象,包括所有对请求的设置。可选的参数参考下表
  • init参数表
参数名 说明
method 请求使用的方法,如 GETPOST
headers 请求的头信息,形式为 Headers 的对象或包含 ByteString 值的对象字面量。
body 请求的 body 信息:可能是一个BlobBufferSourceFormDataURLSearchParams或者USVString对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
mode 请求的模式,如 corsno-cors 或者 same-origin
credentials 请求的 credentials,如 omitsame-origin 或者 include。为了在当前域名内自动发送 cookie,必须提供这个选项,从 Chrome 50 开始,这个属性也可以接受 FederatedCredential (en-US) 实例或是一个 PasswordCredential (en-US) 实例。
cache 请求的 cache 模式:defaultno-storereloadno-cacheforce-cache 或者 only-if-cached
redirect 可用的 redirect 模式:follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误),或者 manual (手动处理重定向)。在 Chrome 中默认使用 follow(Chrome 47 之前的默认值是 manual)。
referrer 一个 USVString 可以是 no-referrerclient 或一个 URL。默认是 client
referrerPolicy 指定了 HTTP 头部 referer 字段的值。可能为以下值之一:no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url
integrity 包括请求的 subresource integrity 值(例如: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。

示例

var myHeaders = new Headers();
myHeaders.append("User-Agent","Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36");
fetch('https://www.baidu.com',{Headers:myHeaders,}).then(data=>{console.log(data.text())
},reason=>{console.log(reason);
})

【JavaScript】Fetch使用说明