Translator|陈浩评论|梁策孙书娟如果我们要从API获取数据或者post数据到服务器，就必须使用FetchAPI。fetch()为我们提供了一种通过请求和响应发送和接收HTTP请求的方法，fetch()函数是最常用于与API交互的全局函数。如何在JavaScript中使用Fetch当我们使用FetchAPI获取URL数据时，最基本的用法只需要一个参数。当我们运行Fetch时，它会有一个返回值：letfetchExample=fetch("https://fjolt.com").then((res)=>{//Dosomethingwithres});Res包含一些非常有趣的内置函数如下：res.text()：返回URL的文本内容。如果是网站，则返回HTML。res.json()：返回格式化的JSON数据。res.blob()：返回blob数据。res.arrayBuffer()：返回数组缓冲区数据res.formData()：返回formData数据。下面是两个例子：使用JavaScriptFetch获取网站的HTML内容由于res.text()有一个函数可以获取URL的文本内容，因此您可以使用它来获取网站的整个HTML。运行res.text()后，我们可以使用另一个then捕获响应并将其记录到控制台：letwebsiteData=fetch("https://fjolt.com").then(res=>res.text()).then((数据)=>{返回数据;});//现在包含我们网站的HTML。如果链接不存在或发生错误，则响应对象将返回错误。例如，未找到的页面将返回404，或者错误的网关将返回502。使用JavaScriptFetch从链接中获取JSON内容Fetch的另一个常见用途是获取数组响应。如果我们想从API获取JSON格式的响应，我们可以使用res.json()。例如，假设URL正在发送有效的JSON，下面的代码将从URL返回一个JSON对象：letapiResponse=fetch("https://fjolt.com/api").then(res=>res.json()).then((data)=>{returndata;});//现在包含一个JSON对象-假设存在一个JavaScriptFetchoptions由于Fetch可以发送和接收HTTP请求，当我们想用它来获取URL数据时，我们也需要可以取一些选项，即fetch(URL,{options})。如果您以前处理过HTTP请求，将会很熟悉。所有可用选项的示例如下：fetch("https://fjolt.com/",{body:JSON.stringify({someData:"value"})method:'POST'mode:'cors'cache:'无缓存'凭证：'同源'标头：{'Content-Type'：'application/json'}，重定向：'follow'referrerPolicy：'no-referrer'}）;以下是这些选项的具体含义:body:包含文本的正文。在这个例子中，我们发送了一些JSON，它必须被字符串化。方法：标准HTTP方法。它可以是POST/GET/DELETE/PUT/CONNECT/PATCH/TRACE/OPTIONS。mode：指是否接受跨域请求，可以是cors/no-cors/same-origin。cache：指的是浏览器如何与Cache进行交互。它可以是default/no-cache/reload/force-cache/only-if-cached。Credentials：指是否随请求发送跨域cookie。它可以是包含/同源/省略。标头：您可以包含与请求关联的任何标头，例如HTTP标头在此处显示“Content-Type”，但您也可以拥有自定义HTTP标头。重定向：确定如果重定向来自Fetch的URL会发生什么。它可以是跟随/错误/手动。referrerPolicy：确定请求传递的referrer信息量。它可以是no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url。JavaScript：fetch，实现异步请求当我们使用Fetch时，它会去我们定义的URL，收集信息并返回响应。这不是即时的，因为加载URL和取回它需要时间。如果我们单独运行Fetch，控制台日志将返回一个Promise而不是来自我们想要的URL的响应：letapiResponse=fetch("https://fjolt.com/api");console.log(apiResponse);//ReturnsPromise
