【笔记】Fetch学习笔记

发表于 更新于 分类于 阅读次数：

前言

Fetch学习笔记

发送请求

  • catch()只会捕获请求失败的错误，不会捕获诸如404之类的错误

method：定义请求方法
headers：定义请求头
body：定义请求体

1
2
3
4
5
6
7
8
9
10
11
fetch("http://127.0.0.1:80/api", {
  method: "GET",
  headers: {
    key: "value",
  },
  body: "value",
}).then((response) => {
  ...
}).catch((err) => {
  ...
});
1
2
3
4
5
6
7
8
9
10
11
async function fn() {
  const response = await fetch("http://127.0.0.1:80/api", {
    method: "GET",
    headers: {
      key: "value",
    },
    body: "value",
  });
}

fn();

解析响应数据

  • 解析响应数据后返回新的Promise对象

以文本格式解析响应数据

1
2
3
4
5
fetch("http://127.0.0.1:80/api").then((response) => {
  return response.text();
}).then((result) => {
  ...
});

以JSON格式解析响应数据

1
2
3
4
5
fetch("http://127.0.0.1:80/api").then((response) => {
  return response.json();
}).then((result) => {
  ...
});

获取请求的URL

1
2
3
fetch("http://127.0.0.1:80/api").then((response) => {
  console.log(response.url);
});

获取请求是否成功

  • 如果HTTP响应状态码在区间[200,299]内，则返回true，否则返回false
1
2
3
fetch("http://127.0.0.1:80/api").then((response) => {
  console.log(response.ok); // true
});

获取HTTP响应状态码

1
2
3
fetch("http://127.0.0.1:80/api").then((response) => {
  console.log(response.status); // 200
});

获取HTTP响应状态文本

1
2
3
fetch("http://127.0.0.1:80/api").then((response) => {
  console.log(response.statusText); // "OK"
});

发送GET请求

传递query参数

手动拼接字符串

1
2
3
fetch(`http://127.0.0.1:80/api?key=value`).then((response) => {
  return response.json();
});

发送POST请求

传递FormData参数

手动拼接字符串

1
2
3
4
5
6
7
fetch("http://127.0.0.1:80/api", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  body: `key=value`,
});

创建FormData对象

1
2
3
4
5
6
7
8
9
10
const formData = new FormData();
formData.append("key", "value");

fetch("http://127.0.0.1:80/api", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  body: formData,
});

通过Form表单元素创建FormData对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form id="app">
  ...
</form>

<script>
  const formElement = document.getElementById("app");
  const formData = new FormData(formElement);
  
  fetch("http://127.0.0.1:80/api", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: formData,
  });
</script>

传递JSON参数

手动拼接字符串

1
2
3
4
5
6
7
fetch("http://127.0.0.1:80/api", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: `{ key: "value" }`,
});

通过JS对象转换为JSON格式字符串

1
2
3
4
5
6
7
8
9
10
11
const jsonData = JSON.stringify({
  key: "value"
});

fetch("http://127.0.0.1:80/api", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: jsonData,
});

文件上传

上传单图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form id="app">
  <input type="file" id="file">
</form>

<script>
  const fileElement = document.getElementById("file");
  const formData = new FormData();
  formData.append("key", fileElement.files[0]);
  
  fetch("http://127.0.0.1:80/api", {
    method: "POST",
    headers: {
      "Content-Type": "multipart/form-data",
    },
    body: formData,
  });
</script>

上传多图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form id="app">
  <input type="file" id="file">
</form>

<script>
  const fileElement = document.getElementById("file");
  const formData = new FormData();
  formData.append("key", fileElement.files);
  
  fetch("http://127.0.0.1:80/api", {
    method: "POST",
    headers: {
      "Content-Type": "multipart/form-data",
    },
    body: formData,
  });
</script>

完成

参考文献

哔哩哔哩——黑马前端教程
哔哩哔哩——奇乐编程学院