1.1、fetch使用语法

fetch(url,options).then((response)=>{

//处理http响应

},(error)=>{

//处理错误

})

url ：是发送网络请求的地址。

options：发送请求参数,

body - http请求参数

mode - 指定请求模式。默认值为cros:允许跨域;same-origin:只允许同源请求;no-cros:只限于get、post和head,并且只能使用有限的几个简单标头。

cache - 用户指定缓存。

method - 请求方法，默认GET

signal - 用于取消 fetch

headers - http请求头设置

keepalive - 用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据。

credentials - cookie设置，默认omit，忽略不带cookie，same-origin同源请求带cookie，inclue无论跨域还是同源都会带cookie。

1.2、response 对象

fetch 请求成功后，响应 response 对象如图：

status - http状态码，范围在100-599之间

statusText - 服务器返回状态文字描述

ok - 返回布尔值，如果状态码2开头的，则true,反之false

headers - 响应头

body - 响应体。响应体内的数据，根据类型各自处理。

type - 返回请求类型。

redirected - 返回布尔值，表示是否发生过跳转。

1.3、读取内容方法

response 对象根据服务器返回的不同类型数据，提供了不同的读取方法。分别有：

response.text() – 得到文本字符串

response.json() - 得到 json 对象

response.blob() - 得到二进制 blob 对象

response.formData() - 得到 fromData 表单对象

response.arrayBuffer() - 得到二进制 arrayBuffer 对象

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

1.4、response.clone()

stream 对象只能读取一次，读取完就没了，这意味着，上边的五种读取方法，只能使用一个，否则会报错。

因此 response 对象提供了 clone() 方法，创建 respons 对象副本，实现多次读取。如下：将一张图片，读取两次：

const response1 = await fetch(‘flowers.jpg’);

const response2 = response1.clone();

const myBlob1 = await response1.blob();

const myBlob2 = await response2.blob();

image1.src = URL.createObjectURL(myBlob1);

image2.src = URL.createObjectURL(myBlob2);

《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 1.5、response.body()

body 属性返回一个 ReadableStream 对象，供用户操作，可以用来分块读取内容，显示下载的进度就是其中一种应用。

const response = await fetch(‘flower.jpg’);

const reader = response.body.getReader();

while(true) {

const {done, value} = await reader.read();

if (done) {

break;

}

console.log(Received ${value.length} bytes)

}

response.body.getReader() 返回一个遍历器，这个遍历器 read() 方法每次都会返回一个对象，表示本次读取的内容块。

二、请求时 POST 和 GET 分别处理

---

请求方式不同，传值方式也不同。xhr 会分别处理 get 和 post 数据传输，还有请求头设置，同样 fetch 也需要分别处理。

2.1、get 方式

只需要在url中加入传输数据，options中加入请求方式。如下面代码所示：

提交

2.2、post 方式

使用 post 发送请求时，需要设置请求头、请求数据等。

将上个实例，改写成 post 方式提交数据，代码如下：

fetch(http://localhost:80/ES6练习题/53fetch.html,{

method:‘POST’,

headers:{

‘Content-Type’:‘application/x-www-form-urlencoded;charset=UTF-8’

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。