axios 常见的content-type、responseType有哪些？

一、Content Type

'Content Type' ，也被称为MIME类型（Multipurpose Internet Mail Extensions），是一种用于标识数据格式的机制。在HTTP协议中，'Content Type’通常通过请求或响应头部的’Content-Type’字段来指定。这个字段的值是一个字符串，用于描述消息体的媒体类型，如文本、图像、音频、视频等，以及可能的字符集和编码方式。当客户端向服务器发送请求时，'Content-Type’头部告诉服务器客户端发送的数据是什么类型，这样服务器就能根据数据的类型来选择合适的处理方式。

在HTTP通信中，有几种常见的’Content Type’类型：

1. application/json：这是最常见的’Content Type’之一,默认就是json，用于表示JSON格式的数据。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。
2. application/x-www-form-urlencoded​：这是另一种常见的’Content Type’，用于表单提交。当表单数据被提交到服务器时，数据会被编码为键值对的形式，并且每个键值对之间用’&'符号分隔。
3. ​multipart/form-data​：这种’Content Type’通常用于文件上传。它允许在一个请求中发送多个部分的数据，每个部分都可以有自己的’Content-Type’和’Content-Disposition’等头部信息。
4. ​text/plain​：这种’Content Type’表示纯文本数据，没有任何格式或编码。

二、responseType

在使用axios进行异步网络请求时，设置正确的responseType类型是非常关键的。axios允许设置多种responseType类型，如'arraybuffer'、'blob'、'document'、'json'、'text'、'stream'。这些类型决定了服务器响应的数据如何被处理和返回。在众多类型中，'json’是最常见的一种，因为它直接返回JavaScript对象，大大简化了数据处理的复杂度。
当你设置responseType为’json’时，axios默认将服务器端返回的数据视为JSON字符串，并自动进行解析。

2.1 理解RESPONSETYPE

responseType属性的设定，直接影响着你如何访问和处理返回的数据。axios通过XMLHttpRequest或fetch（在支持的环境中）对服务器进行请求，而responseType则告诉axios如何解析返回的响应体。

1. arraybuffer：适用于二进制数据，在处理文件上传下载时尤其有用。
2. blob：同样用于二进制数据，常在前端需要处理大型二进制对象（如图片或视频文件）时使用。
3. document：主要用于Web浏览器，允许直接返回一个HTML Document对象。
4. json：返回一个被解析成JavaScript对象的JSON字符串。大多数API交互使用此类型。
5. text：返回纯文本字符串。
6. stream：使用Node.js环境时返回一个流。这对于处理大型数据非常有利。

2.2 应用场景

1. 处理JSON数据
   处理JSON数据是最常见的场景之一。通过将responseType设置为’json’，可以直接获取到JavaScript对象，极大简化了数据处理流程。

axios.get('your-api-url', {
   responseType: 'json'
}).then(response => {
   console.log(response.data); // 直接访问返回的JavaScript对象
});

2. 文件下载
   在文件下载场景中，通常需要将responseType设置为’blob’或’arraybuffer’。这样可以处理二进制数据，进而允许用户保存文件到本地。

axios.get('your-file-url', {
   responseType: 'blob'
}).then(response => {
   const url = window.URL.createObjectURL(new Blob([response.data]));
   const link = document.createElement('a');
   link.href = url;
   link.setAttribute('download', 'your-file-name');
   document.body.appendChild(link);
   link.click();
});