fetch最佳用法window.fetch使⽤加兼容处理⼲什么⽤的?
是浏览器上获取异步资源请求的全局fetch⽅法,是基于基于Promise的。
可以替代XMLHttpRequest 进⾏异步请求
兼容性
image.png
例⼦
fetch.js
import { baseUrl } from './env'
export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
type = UpperCase();
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;
}
}
if (window.fetch && method == 'fetch') {
let requestConfig = {
credentials: 'include',
method: type,
headers: {
'Accept': 'application/json', //⾃⼰可以接收的数据类型
'Content-Type': 'application/json' //请求信息的格式
},
mode: "cors",
cache: "force-cache"
}
if (type == 'POST') {
Object.defineProperty(requestConfig, 'body', {
value: JSON.stringify(data)
})
}
try {
const response = await fetch(url, requestConfig); //Promise对象所以⽤await
console.log('response1',response ) // Response对象
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论