Fetch介绍及⽤法（配置）
接触到越来越多使⽤fetch的项⽬，在此记录fetch使⽤的学习过程。
1. fetch初步介绍--what is Fetch？
MDN上介绍
Fetch API 提供了⼀个获取资源的接⼝（包括跨域请求）。任何使⽤过 XMLHttpRequest 的⼈都能轻松上⼿，但新的API提供了更强⼤和灵活的功能集。
讲点通俗的就是fetch是ajax的升级版，它的super brother。但注意虽然fetch和ajax相同都是⽤来发送请求的，但是他们实现的原理并不相同。这⼀点会在本⽂后⾯介绍。
2. 优点
凡事都是⼀把双刃剑，有利必有弊。先来⼀块糖。
话不多说，先上基本代码
fetch('www.haha/test.js')
.then((response)=>{
return response.json();//返回的响应是JSON格式的，需要转换数据。
}).then((json)=>{
//do something
})
复制代码
从代码上⾯我们可以看到fetch其实是基于promise实现的，由此它的⼀些优点也就浮出⽔⾯
1. 语法简单
2. 可以被使⽤到更多地应⽤场景中
3. 加强了代码的可维护性
4. 避免回调地狱（Callback Hell）问题
.
..优点就先说这么多
3. 缺点--是时候给个巴掌了。
⽼⽣常谈的兼容性问题
当然也都是有解决⽅案地，不在此详细介绍了。
fetch只对⽹络请求报错，对400，500都当做成功的请求（解决⽅案，⾃⼰配置）
fetch('www.haha/test.js')
.then(response => {
if (response.ok) {
return response.json()
} else {
ject({
status: response.status,
statusText: response.statusText
})
}
})
.catch(error => {
if (error.status === 404) {
// do something about 404
}
})
复制代码
4. ⽤法及配置
function postData(url = ``, data = {}) {
//  *为默认配置
return fetch(url, {
method: "POST", // *GET, POST, PUT, DELETE, 等.
//此项为请求⽅法相关配置
mode: "cors", // no-cors（跨域模式但服务器端不⽀持cors）, cors（跨域模式，需要服务器通过Access-Control-Allow-Origin来允许指定的源进⾏跨域）,
*same-origin（同源）
//此项为跨域相关配置
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
fetch最佳用法//此项为缓存相关配置
credentials: "same-origin", // include（携带cookie）,
*same-origin（cookie同源携带）, omit（不携带）
//此项为cookie相关配置
headers: {
"Content-Type": "application/json",
// "Content-Type": "application/x-www-form-urlencoded",
},
redirect: "follow", // manual, *follow（⾃动重定向）, error
//此项为重定向相关配置
referrer: "no-referrer", // no-referrer, *client
body: JSON.stringify(data), // 此处需要和headers⾥的 "Content-Type" 相对应，
1. POST或者PUT⽅法需要此配置并且"Content-Type": "application/json"
2. 表单类的提交需要配置body: formData
var formData = new FormData();
var fileField = document.querySelector("input[type='file']");
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('example/profile/avatar', {
method: 'PUT',
body: formData
})
.then(response => response.json())
.
catch(error => ('Error:', error))
})
.then(response => {
response.json();// 讲json格式数据转换为js对象
//当请求图⽚数据时，此处应为response.blob();
//还有诸多其他不是很常⽤的配置
//  BufferSource
FormData
URLSearchParams
USVString
});
}
复制代码
参考⽂章

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。