如果我们想从 api中获取数据或将数据发布到服务器,必须要用到Fetch API。fetch()为我们提供了一种通过请求和响应发送和接收 HTTP 请求的方法,fetch() 函数是一个全局函数,最常用于与 API 交互。
我们在使用Fetch API获取 URL的数据时,最基本的用法只需要一个参数。当我们运行 Fetch 时,它会有一个返回值:
let fetchExample = fetch("https://fjolt.com").then((res) => {
// Do something with res
});
Res包含一些很有意思的内置函数,如下:
下面是两个例子:
由于res.text()具有可以获取URL 的文本内容的功能,所以可以使用它来获取网站的整个 HTML 。一旦运行 res.text(),我们可以用另一个 then 捕获响应并在控制台记录它:
let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
return data;
});
// Now contains our website's HTML.
如果链接不存在或发生错误,响应对象将返回错误。例如,找不到页面将返回 404,或者网关错误将返回 502。
Fetch 的另一个常见用途是获取数组的响应。如果想从 JSON 格式的 API 中获取响应,我们可以使用 res.json()。例如,以下代码将从 URL 返回一个 JSON 对象,假设 URL 正在发送有效的 JSON:
let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => {
return data;
});
// Now contains a JSON object - assuming one exists
由于 Fetch 可以发送和接收 HTTP 请求,当我们想要使用它获取 URL数据的时候,还可以带一些选项,即 fetch(URL, { options })。如果你以前使用过 HTTP 请求就会对这很熟悉了。所有可用选项的示例,如下所示:
fetch("https://fjolt.com/", {
body: JSON.stringify({ someData: "value" })
method: 'POST'
mode: 'cors'
cache: 'no-cache'
credentials: 'same-origin'
headers: {
'Content-Type': 'application/json'
},
redirect: 'follow'
referrerPolicy: 'no-referrer'
});
以下是这些选项的具体含义:
当我们使用 Fetch 时,它会转到我们定义的 URL,收集信息并将响应返回。 这不是即时的,因为加载 URL 并将其取回需要时间。如果我们单独运行 Fetch,控制台日志将返回一个 Promise,而不是来自我们想要的 URL 的响应:
let apiResponse = fetch("https://fjolt.com/api");
console.log(apiResponse); // Returns Promise<Pending>
在fetch() 函数运行时,JavaScript并不会等待响应。如果我们想要访问响应,我们必须明确告诉 JavaScript 需要等待。
等待 fetch() 有两种方法:
从fetch()调用中访问数据的一种方法是将其链接到Fetch上,从而允许我们从URL访问响应。fetch()的内容可以在then()回调函数内操作,但不能在回调函数外操作。例如:
let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => {
console.log(data);
// We can do anything with the data from our api here.
return data;
});
console.log(apiResponse); // This will return Promise<Pending>
// That means we can't use the apiResponse variable
// outside of the then() function.
如果我们想在 then 函数之外使用 fetch() 的内容,则必须使用 await。
等待Fetch的另一种方法是使用 await 关键字。大多数的浏览器都支持Top-level awaits,如果你使用的是Node.JS 14.8 之前的版本,你需要将await相关的代码打包到异步函数中。
如果我们使用 await,可以在函数或代码的任何地方使用它来获取 API 的响应,并在其上使用任何响应函数,例如 text() 或 json()。 例如:
// Typically we wrap await in an async function
// But most modern browsers and Node.JS support
// await statements outside of async functions now.
async getAPI() {
let apiResponse = await fetch("https://fjolt.com/api");
let response = apiResponse.json();
// Since we waited for our API to respond using await
// The response variable will return the response from the API
// And not a promise.
console.log(response);
}
getAPI();
本文中,我们介绍了 Fetch 的工作原理、如何通过 fetch() 发送不同的选项,以及如何使用 JavaScript 中的异步概念来等待响应。 fetch() 是 JavaScript 中的一个强大工具,经常在一些优秀项目中发挥重要作用。
译者:陈豪
原文:How Fetch Works in JavaScript ,作者:Johnny Simpson
传统Ajax是利用XMLHttpRequest(XHR)发送请求获取数据,不注重分离的原则。而Fetch API是基于Promise设计,专为解决XHR问题而出现。fetch API看起来简单,却是js语法不断增强提高带来的改善。
fetch就是XMLHttpRequest的一种替代方案。如果有人问你,除了Ajax获取后台数据之外,还有没有其他的替代方案?这是你就可以回答,除了XMLHttpRequest对象来获取后台的数据之外,还可以使用一种更优的解决方案fetch。
当fetch遇到302状态码,会发生什么?fetch不能拦截302,浏览器会自动从302响应的头信息的重定向地址中取到数据。针对认证的情况,后端可以返回401状态码,让前端去检查返回的状态码并据此执行相应操作。
Fetch API 提供了一个获取资源的接口(包括跨域请求)。任何使用 过 XMLHttpRequest 的人都能轻松上手,但新的API提供了更强大和 灵活的功能集。Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。
fetch默认不携带cookie配置其 credentials 项,其有3个值:omit: 默认值,忽略cookie的发送;same-origin: 表示cookie只能同域发送,不能跨域发送;include: cookie既可以同域发送,也可以跨域发送
fetch:一个获取资源的接口,类似于ajax,是基于 Promise之上设计,旧版本IE 完全不支持,须借助 polyfill来兼容,提供了对 Request 和 Response 对象的通用定义
Fetch 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。
Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源
最近遇到一个下载的需求,由于 url 参数太长(常用的下载方法 a 标签或者 location.href 的方法都是 get 请求,get 请求参数长度有限制),无法下载,考虑了好几种方案,最终还是觉得通过 ajax 的 POST 方法进行下载,比较容易实现
在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!