基于axios 的responseType类型的设置方法

关于基于axios的responseType类型的设置方法，我可以给你讲解一下。下面是一份详细攻略：

什么是responseType？

responseType是指定响应的数据类型，常用的有五种，分别是：

• json ：返回JSON数据
• arraybuffer ：返回二进制数据
• blob ：返回二进制数据
• document ：返回HTML文档
• text ：返回纯文本字符串

设置responseType类型的方法

可以通过axios的config参数来设置，具体语法如下：

axios({
  method: 'get',
  url: '/data.json',
  responseType: 'json'
}).then(function (response) {
  console.log(response.data);
}).catch(function (error) {
  console.log(error);
});

以上代码中，我们通过设置responseType为json，来获取接口返回的JSON格式的数据。

示例1：二进制数据的处理

如果接口返回的是二进制数据，我们需要设置responseType为'arraybuffer'或'blob'，然后再根据需求来对数据进行处理。

以下是代码示例：

axios({
  method: 'get',
  url: '/image.png',
  responseType: 'arraybuffer'
}).then(function (response) {
  const arrayBuffer = response.data;
  const blob = new Blob([arrayBuffer], { type: 'image/png' });
  const url = URL.createObjectURL(blob);
  const img = new Image();
  img.src = url;
  document.body.appendChild(img);
}).catch(function (error) {
  console.log(error);
});

以上代码中，我们通过设置responseType为arraybuffer来获取接口返回的二进制数据，然后再对数据进行处理，最终将图片渲染到页面上。

示例2：纯文本字符串的处理

如果接口返回的是纯文本字符串，我们需要设置responseType为'text'，然后再根据需求来对数据进行处理。

以下是代码示例：

axios({
  method: 'get',
  url: '/test.txt',
  responseType: 'text'
}).then(function (response) {
  document.body.innerHTML = response.data;
}).catch(function (error) {
  console.log(error);
});

以上代码中，我们通过设置responseType为text来获取接口返回的纯文本字符串，然后将其作为HTML插入到页面中。

总结

以上就是关于基于axios的responseType类型的设置方法的详细攻略。在实际开发中，我们需要根据实际情况来选择对应的responseType类型，并对数据进行处理。