【Ajax】Fetch请求

参考自：https://zh.javascript.info/network

ajax请求可以做到在没有重新加载页面下，进行数据的更新例如做到：

• 提交订单，
• 加载用户信息，
• 从服务器接收最新的更新，

也是前端用于发起网络请求的比较好的主流方式，ajax请求主要包括两种
XML和fetch，XML可能接触的比较多，下面主要学习fetch请求。

fetch() 方法是一种现代通用的方法，那么我们就从它开始吧。旧版本的浏览器不支持它（可以 polyfill），但是它在现代浏览器中的支持情况很好。

基本语法

let promise = fetch(url,[options])

url:要访问的url
options：可选参数：method、header等

• 没有 options，这就是一个简单的 GET 请求，下载 url 的内容。
• 浏览器立即启动请求，并返回一个该调用代码应该用来获取结果的 promise。

获取响应有两个阶段：

第一阶段， 当服务器发送了响应头（response header），fetch 返回的 promise 就使用内建的 Response class 对象来对响应头进行解析。

检查响应头，检查http状态确定请求是否成功，当前还没有响应体

如果 fetch 无法建立一个 HTTP 请求，例如网络问题，亦或是请求的网址不存在，那么 promise 就会 reject。异常的 HTTP 状态，例如 404 或 500，不会导致出现 error。

我们可以在 response 的属性中看到 HTTP 状态：
status —— HTTP 状态码，例如 200。
ok —— 布尔值，如果 HTTP 状态码为 200-299，则为 true。

let response = await fetch(url);

if(response.ok){
   
let json = await response.json();
}else{
   
	alert("HTTP-ERROR" + response.status)
}

第二阶段， 为了获取 response body，我们需要使用一个其他的方法调用。

Response 提供了多种基于 promise 的方法，来以不同的格式访问 body：

response.text() —— 读取 response，并以文本形式返回 response，
response.json() —— 将 response 解析为 JSON 格式，
response.formData() —— 以 FormData 对象（在 下一章 有解释）的形式返回 response，
response.blob() —— 以 Blob（具有类型的二进制数据）形式返回 response，
response.arrayBuffer() —— 以 ArrayBuffer（低级别的二进制数据）形式返回 response，
另外，response.body 是 ReadableStream 对象，它允许你逐块读取 body，我们稍后会用一个例子解释它。

如果要创建一个post请求，

let user = {
   
  name: 'John',
  surname: 'Smith'
};

let response = await fetch('/article/fetch/post/user', {
   
  method: 'POST',
  headers: {