二、Response 对象：处理 HTTP 回应

2024-07-16 19:39| 来源: 网络整理| 查看: 265

2.4 读取内容的方法2.4 读取内容的方法

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

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

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

response.text()

response.text()可以用于获取文本数据，比如 HTML 文件。

const response = await fetch('/users.html');const body = await response.text();document.body.innerHTML = body

response.json()

response.json()主要用于获取服务器返回的 JSON 数据，前面已经举过例子了。

response.formData()

response.formData()主要用在 Service Worker 里面，拦截用户提交的表单，修改某些数据以后，再提交给服务器。

response.blob()

response.blob()用于获取二进制文件。

const response = await fetch('flower.jpg');const myBlob = await response.blob();const objectURL = URL.createObjectURL(myBlob);const myImage = document.querySelector('img');myImage.src = objectURL;

上面示例读取图片文件flower.jpg，显示在网页上。

response.arrayBuffer()

response.arrayBuffer()主要用于获取流媒体文件。

const audioCtx = new window.AudioContext();const source = audioCtx.createBufferSource();const response = await fetch('song.ogg');const buffer = await response.arrayBuffer();const decodeData = await audioCtx.decodeAudioData(buffer);source.buffer = buffer;source.connect(audioCtx.destination);source.loop = true;

上面示例是response.arrayBuffer()获取音频文件song.ogg，然后在线播放的例子。

【本文地址】

公司简介

联系我们