fetch请求获取blob和arraybuffer文件流及核心API使用总结_fetch arraybuffer

在项目中使用fetch操作文件流，因为没有用到axios，而且fetch的使用方式和axios还有一定的区别，所以写一篇博文，具体细致的描述下fetch的基本使用。

一、Fetch在项目中的基本使用

Fetch API提供了一个 JavaScript 接口用于访问和操作HTTP管道的零件，如请求和响应。它还提供了一种全局fetch()方法，可以提供一种简单，合理的方式在网络上异步获取资源。

1. 常用基本的json格式响应

fetch(url).then(function(response) {
   
  return response.json();
}).then(function(data) {
   
  console.log(data);
}).catch(function(e) {
   
  console.log("Oops, error");
});
1
2
3
4
5
6
7
8
9
10

2. 常用参数配置写法

1. GET传递参数

fetch(url?key1=val1&key2=val2&...).then((response) => response.json()).then((json) => {
   
   //处理返回值
}).catch((error) => {
   
   //异常处理
})
1
2
3
4
5
6
7

2. POST传递参数

fetch(url', {
   
  method: 'POST',
  headers: {
   
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
   
    firstParam: 'yourValue',
    secondParam: 'secondValue',
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 复杂表单数据的传递，比如图片、文件等

let formData = new FormData()