一、什么是Fetch ？
1.Fetch本质上是一种标准，该标准定义了请求、响应和绑定的流程。
2.Fetch标准还定义了Fetch () JavaScript API。
3.可用于前后端，数据交互。
4.fetch返回的是promise对象，比XMLHttpRequest的实现更简洁，fetch 使用起来更简洁 ，完成工作所需的实际代码量也更少
5.fetch 可自定义是否携带Cookie。
6.fetch不像axios需要安装使用，fetch可以直接使用。
二、如何使用Fetch
Fetch API 提供了一种全局fetch()方法，该方法位于 WorkerOrGlobalScope 这一个 mixin 中 方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。
fetch(input?: Request | string, init?: RequestInit): Promise<Response>
fetch(url, options).then(function(response) {
// 处理 HTTP 响应
}, function(error) {
// 处理网络错误
})
fetch() 参数
fetch方法可以接收两个参数input和options。
- input 参数可以是字符串，包含要获取资源的 URL。也可以是一个 Request 对象。
- options 是一个可选参数。一个配置项对象，包括所有对请求的设置。可选的参数有：
method: 请求使用的方法，如 GET、POST、DELETE、PUT等。
headers: 请求的头信息，包含与请求关联的Headers对象。
body: 请求的 body 信息。注意 GET 或 HEAD 方法的请求不能包含 body 信息
mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie ， 必须提供这个选项。
三、常用的fetch请求
html
fetch('/index/fetchHtml')
.then(res => {
return res.text() // 定义返回格式。
}).then(res => {
document.body.innerHTML += res
})
.catch((err) => {
})
JSON
fetch('请求路径')
.then((res) => {
return res.json()
})
.then(res => {
console.log(res)
})
.catch((err => {
}))
POST JSON
fetch('请求路径',{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: '张麻子',
age: '26',
})
})
.then((res) => {
return res.json()
})
.then(res => {
console.log(res)
})
.catch((err => {
}))
4、fetch注意事项
1. 错误处理
fetch只有在网络错误的情况，返回的promise会被reject。成功的 fetch() 检查不仅要包括 promise 被 resolve，还要包括 Response.ok 属性为 true。HTTP 404 状态并不被认为是网络错误，所以Promise的状态为resolve。
2. credentials 设置
fetch可以通过credentials自己控制发送请求时是否带上cookie。credentials可设置为include、same-origin、omit。include为了让浏览器发送包含凭据的请求（即使是跨域源）。如果你只想在请求URL与调用脚本位于同一起源处时发送凭据，请添加credentials: 'same-origin'。要改为确保浏览器不在请求中包含凭据，请使用credentials: 'omit'。
5.fetch简单封装
1.和src同级新建一个api（名字可以随意起）的文件夹，在文件夹里面新建一个request.js （名字可以随意起）文件内容如下：
export default async(url = '', data = {}, type = 'GET') => {
const baseUrl = "https://api.it120.cc/small4" // 基础路径
type = type.toUpperCase(); // 请求方式小写转换成大写
url = baseUrl + url; // 请求地址的拼接
if (type == 'GET') {
let dataStr = ''; //数据拼接字符串
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&';
})
if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
}
let requestConfig = {
credentials: 'same-origin',
method: type,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
mode: "cors", // 用来决定是否允许跨域请求 值有 三个 same-origin，no-cors（默认）以及 cores;
cache: "force-cache" // 是否缓存请求资源 可选值有 default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
}
if (type == 'POST') {
Object.defineProperty(requestConfig, 'body', {
value: JSON.stringify(data)
})
}
try {
const response = await fetch(url, requestConfig);
const responseJson = await response.json();
return responseJson
} catch (error) {
throw new Error(error)
}
}
6.封装接口
import api from '../request.js';
下面是简写的形式
// getXXX 自定义的接口名字
export const getXXX = (params) => api(`/apigb/v1/component`, params)
export const postXXX = (params) => api.post(`/apigb/v1/component/update-info`, params,'post')
