js之fetch请求数据封装

梦里梦外; 2022-01-30 00:57 494阅读 0赞

> fetch async 封装

let baseUrl = 'api域名地址'
    export default async(url = '', data = { }, type = 'GET', method = 'fetch') => { 
    	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;
    		}
    	}
    
    	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);
    			const responseJson = await response.json();
    			return responseJson
    		} catch (error) { 
    			throw new Error(error)
    		}
    	} else { 
    		return new Promise((resolve, reject) => { 
    			let requestObj;
    			if (window.XMLHttpRequest) { 
    				requestObj = new XMLHttpRequest();
    			} else { 
    				requestObj = new ActiveXObject;
    			}
    
    			let sendData = '';
    			if (type == 'POST') { 
    				sendData = JSON.stringify(data);
    			}
    
    			requestObj.open(type, url, true);
    			requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    			requestObj.send(sendData);
    
    			requestObj.onreadystatechange = () => { 
    				if (requestObj.readyState == 4) { 
    					if (requestObj.status == 200) { 
    						let obj = requestObj.response
    						if (typeof obj !== 'object') { 
    							obj = JSON.parse(obj);
    						}
    						resolve(obj)
    					} else { 
    						reject(requestObj)
    					}
    				}
    			}
    		})
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，494人围观）

还没有评论，来说两句吧...

相关阅读

相关 js fetch请求使用

文章目录 1、fetch请求语法格式 1.1、fetch请求options参数说明 1.2、fetch请求response返回json数据

痛定思痛。/ 2023年10月10日 14:54/ 0 赞/ 90 阅读

相关前端使用fetch请求数据

使用fetch请求数据 created(){ fetch("http://localhost:8181/user/page?page

我就是我/ 2023年10月06日 22:12/ 0 赞/ 42 阅读

相关 AJAX发送网络请求-封装AJAX-Fetch发送网络请求

文章目录 1.AJAX网络请求 1.1 AJAX发送请求 1.2 XHR的状态 1.3 XHR

秒速五厘米/ 2023年09月28日 13:49/ 0 赞/ 67 阅读

相关封装fetch

封装fetch export default async(url = '', data = { }, type = 'GET', method = 'fetch'

落日映苍穹つ/ 2023年01月02日 13:28/ 0 赞/ 179 阅读

相关解析Fetch实现请求数据

![Image 1][] > 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很

谁践踏了优雅/ 2022年04月25日 00:34/ 0 赞/ 266 阅读

相关 fetch 如何请求数据

一序言在传统Ajax 时代，进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱，对于刚入门的新手并

柔光的暖阳◎/ 2022年04月03日 03:42/ 0 赞/ 292 阅读

相关 fetch 如何请求数据

[fetch 如何请求数据][fetch] > fetch 如何请求数据在传统Ajax 时代，进行 API 等网络请求都是通过XMLHttpRequest

叁歲伎倆/ 2022年04月02日 09:00/ 0 赞/ 307 阅读

相关 react 运用 fetch 请求数据

componentDidMount(){ fetch('服务器接口').then(res=>{ if(res.ok){

曾经终败给现在/ 2022年02月27日 05:42/ 0 赞/ 302 阅读

相关 js之fetch请求数据封装

> fetch async 封装 let baseUrl = 'api域名地址' export default async(url = '', data =

梦里梦外;/ 2022年01月30日 00:57/ 0 赞/ 495 阅读

相关 fetch 封装

import qs from "qs" export default function ajax(url,params={ },type='GET')

系统管理员/ 2021年07月24日 12:32/ 0 赞/ 454 阅读