浏览器接收数据并处理

注意: 我们这里的接收数据并处理指的是，js通过ajax或者fetch方法，向服务器发送请求去获取数据，而不是js通过修改DOM的src="xxxxxx", 让元素发起请求，这是完全两回事。

处理方式

浏览器自动化处理时，它会根据http中响应头的content-type属性，将二进制数据进行对应的处理。

js代码处理时，处理方式就自己可控，没有那么依赖于content-type属性。

注意：编程时，不论前后端，都要保证正确配置content-type属性，这是良好的习惯

 数据类型

response有以下几种方法进行数据转换：

• text()
• json()
• blob()：在Web开发中，Blob(Binary Large Object)是一种二进制数据，可以用来表示各种类型的数据，如图像、音频、视频、文本等。
• arrayBuffer()
• formData()

这些方法执行都是异步的，会返回一个 Promise，这个 Promise 会在函数功能完成后调用resolve函数，该Promise中的PromiseState与PromiseResult复制给then生成的PromiseState与PromiseResult。示例如下：

fectch("http://xxxx")
    .then(res => res.text())
    .then(data => {
        console.log(data);
    })

场景

需要通过js代码进一步处理：

• 文本文件，类文本文件如html、css、js、xml等这些文本进行处理，调用text()。
• JSON文件，调用json()。
• 多媒体文件， 比如说视频、音频、pdf等，调用arrayBuffer()，但非常少的时候，我们需要对其进行处理，大部分都是在后端进行的。
• application/x-www-form-urlencoded, multipart/form-data等表单数据调用formData()。

展示在页面中/使用

• 文本文件/类文本文件，调用text()。
• 多媒体资源如图片音频视频/pdf等，可以使用blob()，然后生成url，再用img、video等标签的src，进行展示。如下所示：

async function getData() {
    const response = await fetch("http://localhost:3000/getmp4");
    const data = await response.blob();
    const url = URL.createObjectURL();
    cosnt video = document.querySelector("video");
    video.src = url;
    video.autoplay = true;
    console.log(url);
}

• 图片还有一种处理方式，转换为base64，调用text()。如下所示：

async function getData() {
    const response = await fetch("http://localhost:3000/base64");
    const data = await response.text();
    const image = document.querySelector("img");
    img.src = "data:image/png;base64,${data}";
}

下载保存到电脑

也是需要Blob实例：

async function getData() {
    const response = await fetch("http://localhost:3000/getmp4");
    const data = await response.blob();
    const url = URL.createObjectURL(data);
    cosnt link = document.createElement("a");
    link.href = url;
    link.download = "zcz.png";
    link.click();
}

如果你想实现按钮点击下载的功能，可以click事件，然后做一个回调函数传进去。