fetch网络请求

对于来自 JavaScript 的网络请求，有一个总称术语 “AJAX”（Asynchronous JavaScript And XML 的简称）。但是，我们不必使用 XML：这个术语诞生于很久以前，所以这个词一直在那儿。

fetch

fetch() 方法是一种现代通用的方法

let promise = fetch(url, [options])

get请求

let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch(url);
let commits = await response.json(); // 读取 response body，并将其解析为 JSON
alert(commits[0].author.login);

post请求

let user = {
  name: 'John',
  surname: 'Smith'
};
let response = await fetch('/article/fetch/post/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(user)
});
let result = await response.json();
alert(result.message);

典型的 fetch 请求由两个 await 调用组成：

let response = await fetch(url, options); // 解析 response header
let result = await response.json(); // 将 body 读取为 json

或者以 promise 形式：

fetch(url, options)
  .then(response => response.json())
  .then(result => /* process result */)

响应的属性：

• response.status —— response 的 HTTP 状态码，
• response.ok —— HTTP 状态码为 200-299，则为 true。
• response.headers —— 类似于 Map 的带有 HTTP header 的对象。

获取 response body 的方法：

• response.text() —— 读取 response，并以文本形式返回 response，
• response.json() —— 将 response 解析为 JSON 对象形式，
• response.formData() —— 以 FormData 对象（form/multipart 编码，参见下一章）的形式返回 response，
• response.blob() —— 以 Blob（具有类型的二进制数据）形式返回 response，
• response.arrayBuffer() —— 以 ArrayBuffer（低级别的二进制数据）形式返回 response。

fetch 选项：

• method —— HTTP 方法，
• headers —— 具有 request header 的对象（不是所有 header 都是被允许的）
• body —— 要以 string，FormData，BufferSource，Blob 或 UrlSearchParams 对象的形式发送的数据（request body）。