Fetch API

一,Fetch API 介绍

Fetch API提供了一个 JavaScript 接口,用于访问和操纵HTTP的请求和响应等。提供了一个全局 fetch()方法来跨网络异步获取资源。

fetch()是 XMLHttpRequest 的升级版,用于在 JavaScript 脚本里面发出 HTTP 请求。


二,基本用法:

fetch('https://test.com/api/info')
 .then(response => response.json())
 .then(json => console.log(json))
 .catch(err => console.log('Request Failed', err)); 


async function getJSON() {
 let url = 'https://test.com/api/info';
 try {
  let response = await fetch(url);
  return await response.json();
 } catch (error) {
  console.log('Request Failed', error);
 }
}


三,请求

fetch()的第二个参数:定制 HTTP 请求

fetch()的第一个参数是 URL,还可以接受第二个参数,作为配置对象,定制发出的 HTTP 请求。

fetch(url, optionObj)

上面命令的optionObj就是第二个参数。


HTTP 请求的方法、标头、数据体都在这个对象里面设置。下面是一些示例。

const response = await fetch(url, {
 method: 'POST',
 headers: {
  "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
 },
 body: 'foo=bar&lorem=ipsum',
});

const json = await response.json();


上面示例中,配置对象用到了三个属性。

method:HTTP 请求的方法,POST、DELETE、PUT都在这个属性设置。

headers:一个对象,用来定制 HTTP 请求的标头。

body:POST 请求的数据体。

注意,有些标头不能通过headers属性设置,比如Content-Length、Cookie、Host等等。它们是由浏览器自动生成,无法修改。


三,Response 对象

fetch()请求成功以后,得到的是一个 Response 对象。它对应服务器的 HTTP 回应。

const response = await fetch(url);


前面说过,Response 包含的数据通过 Stream 接口异步读取,但是它还包含一些同步属性,对应 HTTP 回应的标头信息(Headers),可以立即读取。

async function fetchText() {
 let response = await fetch('/readme.txt');
 console.log(response.status); 
 console.log(response.statusText);
}


上面示例中,response.status和response.statusText就是 Response 的同步属性,可以立即读取。


标头信息属性有下面这些:

1,Response.ok属性返回一个布尔值,表示请求是否成功,true对应 HTTP 请求的状态码 200 到 299,false对应其他的状态码。

2,Response.status属性返回一个数字,表示 HTTP 回应的状态码(例如200,表示成功请求)。

3,Response.statusText属性返回一个字符串,表示 HTTP 回应的状态信息(例如请求成功以后,服务器返回"OK")。

4,Response.url属性返回请求的 URL。如果 URL 存在跳转,该属性返回的是最终 URL。

5,Response.type属性返回请求的类型。可能的值如下:

 basic:普通请求,即同源请求。

 cors:跨域请求。

 error:网络错误,主要用于 Service Worker。

 opaque:如果fetch()请求的type属性设为no-cors,就会返回这个值,详见请求部分。表示发出的是简单的跨域请求,类似<form>表单的那种跨域请求。

 opaqueredirect:如果fetch()请求的redirect属性设为manual,就会返回这个值,详见请求部分。

6,Response.redirected属性返回一个布尔值,表示请求是否发生过跳转。


读取内容的方法

Response对象根据服务器返回的不同类型的数据,提供了不同的读取方法。

response.text():得到文本字符串。
response.json():得到 JSON 对象。
response.blob():得到二进制 Blob 对象。
response.formData():得到 FormData 表单对象。
response.arrayBuffer():得到二进制 ArrayBuffer 对象。

上面5个读取方法都是异步的,返回的都是 Promise 对象。必须等到异步操作结束,才能得到服务器返回的完整数据。


参考:

https://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API


修改时间 2021-05-06

真诚赞赏,手留余香
赞赏
随机推荐
树妖3
Mint-ui 创建步骤
原生JS判断页面滚动到底部
怪异模式(Quirks Mode)导致 button 和 input 的大小不统一原因
Vue和Ajax的关系,Axios简介
如何选择开源许可证?
LOGO设计的时候为什么要画那些圈圈?
Webpack的项目中,如何import导入绝对路径
Webpack 使用 HtmlWebpackPlugin 简化了HTML文件的创建
MAC 环境下初始化mysql root 密码