数据请求方式Fetch

一、前言

在前后端分离项目中，前端请求后端接口得到后端数据，完成页面内容的渲染或功能状态的判断，已经成为常规操作。那么，关于前端如何请求后端接口获取并解析数据，主要有哪些方式呢：

1. 刷新页面：最直接但是最体验最差的一种方式
2. form表单：会触发页面跳转，无法实现页内重复请求
3. ifream：比较消耗性能，且控制成本过高
4. Ajax - 使用XMLHttpRequest对象进行异步请求，极大的提高了用户体验，实现了页内请求
5. Fetch - Ajax的替代者，浏览器内置方法，封装了Promise机制，优化了异步问题
6. jQuery - 一种前端框架，封装了数据请求模块，但体积较大
7. axios、request等众多第三方开源库：对原生方法的二次封装，各有优劣势，百家争鸣

本文主要介绍浏览器内置请求方法fecth。

二、关于Fetch API

1. Fetch是浏览器内置API，在浏览器环境中，可以通过顶层对象window获取。
2. Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。说明Fetch的目标不仅仅是浏览器环境，将来在服务器环境中也有可能提供对Fetch的支持。
3. 在使用Fetch发送请求或者获取资源时，需要使用 fetch() 方法。
4. fetch() 方法必须接受一个参数：要请求的路径，和一个可选参数 Request 对象。无论请求成功与否，它都返回一个 Promise 对象
   • 请求成功时，会得到请求的 Response 对象
   • 请求失败时，会得到一个TypeError
   • 需要注意的是：当接收到一个代表错误的 HTTP 状态码时（如404），从 fetch() 返回的 Promise 不会被标记为 reject，仅当网络故障时或请求被阻止时，才会标记为 reject。但fetch会修改 resolve 返回值的 ok 属性为 false。

三、fetch() 方法的基本使用

// 请求成功，resolve
const url = "https://gitee.com/api/v5/users/liyangyf";
fetch(url).then( response=>console.log(response) )	// 此时resolve得到的是response对象

// 请求成功，resolve，但后端返回404
const url = "https://gitee.com/api/v5/users/liyangyf-test";
fetch(url).then( response=>console.log(response) )

需要注意的是，此时拿到的仅仅是Response对象，如果需要更进一步获取到接口数据，必须进一步解析Response对象。

const url = "https://gitee.com/api/v5/users/liyangyf";
fetch(url).then( response=>response.json() )		// 将response数据解析成json
					.then( json=>console.log(json) )

一、关于Response对象常见同步属性解析：

1. Response.ok：布尔值，表示请求是否成功。true对应 HTTP 请求的状态码 200 到 299，false对应其他状态码。
2. Response.status：数值，表示 HTTP 回应的状态码（如200，表示成功请求）
3. Response.statusText：字符串，表示 HTTP 回应的状态信息（如请求成功后，服务器返回"OK"）
4. Response.url：请求的 URL。如果 URL 存在跳转，该属性返回的是最终 URL。
5. Response.type：请求的类型。可能的值：
   1. basic：普通请求，即同源请求
   2. cors：跨域请求
   3. error：网络错误
   4. opaque：如果fetch()请求的type属性设为