借助 fetch()
,您可以发出类似于 XMLHttpRequest (XHR) 的网络请求。主要区别在于,Fetch API 使用 Promise,其 API 更简单,可帮助您避免 XMLHttpRequest API 中复杂的回调。
如果您以前从未使用过Promise,请参阅 JavaScript Promise 简介。
基本提取请求
下面是一个使用 XMLHttpRequest
实现的示例
然后使用 fetch
。我们希望请求某个网址、获取响应,并将其解析为 JSON。
XMLHttpRequest
XMLHttpRequest
需要两个监听器来处理成功和错误情况,以及对 open()
和 send()
的调用。MDN 文档中的示例。
function reqListener () {
const data = JSON.parse(this.responseText);
console.log(data);
}
function reqError (err) {
console.log('Fetch Error :-S', err);
}
const oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();
提取
我们的提取请求如下所示:
fetch('./api/some.json')
.then(response => {
if (response.status !== 200) {
console.log(`Looks like there was a problem. Status Code: ${response.status}`);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
})
.catch(err => {
console.log('Fetch Error :-S', err);
});
fetch()
请求只需进行一次调用即可执行与 XHR 相同的工作
示例。为了处理回复,我们首先检查回复状态是否为
200,然后将响应解析为 JSON。对 fetch()
请求的响应是一个 Stream 对象,这意味着在调用 json()
方法后,系统会返回一个 Promise。流是异步发生的。
响应元数据
前面的示例展示了 Response 对象的状态,以及如何将响应解析为 JSON。下面介绍了如何处理您可能需要的其他元数据 例如标头:
fetch('users.json').then(response => {
console.log(response.headers.get('Content-Type'));
console.log(response.headers.get('Date'));
console.log(response.status);
console.log(response.statusText);
console.log(response.type);
console.log(response.url);
});
响应类型
发出提取请求时,系统会为响应分配 response.type
,值为“basic
”“cors
”或“opaque
”。这些 types
显示资源的来源,您可以使用它们来确定如何处理响应对象。
当浏览器请求同一源的资源时,响应会采用 basic
类型,并且会限制您可以从响应中查看的内容。
如果针对另一来源上的资源发出请求,且该来源返回
CORs 标头,则类型为 cors
。cors
响应与 basic
响应类似,但会将您可以查看的标头限制为 Cache-Control
、Content-Language
、Content-Type
、Expires
、Last-Modified
和 Pragma
。
opaque
响应来自不返回 CORS 标头的其他来源。如果响应不透明,我们将无法读取返回的数据或查看请求的状态,这意味着您无法检查请求是否成功。
您可以为提取请求定义模式,以便 解决。您可以设置的模式如下:
- 只有针对同一来源的资产的请求,
same-origin
才会成功; 并拒绝所有其他请求 cors
允许在同一来源以及其他来源请求资源, 返回相应的 COR 标头。cors-with-forced-preflight
会执行预检 查看 然后再提出任何请求no-cors
旨在向不含 CORS 标头的其他来源发出请求,并生成opaque
响应,但正如前所述,目前无法在窗口全局范围内执行此操作。
如需定义模式,请在 fetch
请求中将 options 对象添加为第二个参数,并在该对象中定义模式:
fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
.then(response => response.text())
.then(text => {
console.log('Request successful', text);
})
.catch(error => {
log('Request failed', error)
});
Promise 链
promise 的一大特色是能够将它们链接在一起。对于
fetch()
,这样可让您在多个提取请求之间共享逻辑。
如果您使用的是 JSON API,则需要检查状态并解析每个响应的 JSON。您可以通过定义状态和 在返回 promise 的单独函数中进行 JSON 解析,并使用提取 只处理最终数据和错误情况的请求。
function status (response) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}
function json (response) {
return response.json()
}
fetch('users.json')
.then(status)
.then(json)
.then(data => {
console.log('Request succeeded with JSON response', data);
}).catch(error => {
console.log('Request failed', error);
});
此示例定义了一个 status
函数,用于检查 response.status
和
它会将已解析的 Promise 作为
Promise.resolve()
,
或被拒的 Promise,如下所示:
Promise.reject()
。
这是 fetch()
链中第一个被调用的方法。
如果 promise 解析完毕,脚本会调用 json()
方法,该方法会从 response.json()
调用返回第二个 promise,并创建一个包含解析的 JSON 的对象。如果解析失败,Promise 将被拒绝,并且 catch 语句会执行。
借助这种结构,您可以在所有提取请求中共享逻辑,从而更轻松地维护、阅读和测试代码。
POST 请求
有时,Web 应用需要使用 POST 方法调用 API,并在请求中包含一些
参数。为此,请在 fetch()
选项中设置 method
和 body
参数:
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
})
.then(json)
.then(data => {
console.log('Request succeeded with JSON response', data);
})
.catch(error => {
console.log('Request failed', error);
});
通过提取请求发送凭据
要使用 Cookie 等凭据发出提取请求,请将请求的
将 credentials
值更改为 "include"
:
fetch(url, {
credentials: 'include'
})