js之fetch请求数据封装

梦里梦外; 2022-01-30 00:57 465阅读 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 条评论，465人围观）

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

相关阅读

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

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

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

相关封装fetch

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

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

相关解析Fetch实现请求数据

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

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

相关 fetch 如何请求数据

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

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

相关 fetch 如何请求数据

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

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

相关 react 运用 fetch 请求数据

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

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

相关 js之fetch请求数据封装

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

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

相关 fetch请求详解

最新更新时间：2019年06月04日16:18:30 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：fetch相关概述

灰太狼/ 2022年01月22日 01:07/ 0 赞/ 314 阅读

相关 js封装请求方法

参考[axios中文文档][axios] 封装公共请求函数 function sendGetReq(params, url, callback) {

﹏ヽ暗。殇╰゛Y/ 2021年07月25日 18:24/ 0 赞/ 536 阅读

相关 fetch 封装

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

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