对ajax请求的封装(post),带token或者不带发送请求

灰太狼 2023-05-21 15:17 2阅读 0赞

简单的model的实现 ，用于对网络请求的封装

/** * 简单的model实现 * @auth snail * @description 一经复制,概不负责 */
    
    
    var url_img = 'http://yuerjia.wangchuangcode.cn'; //图片域名
    var url_post = 'http://yuerjia.wangchuangcode.cn'; //请求域名
    class model { 
    	/** * [instance 当前实例] * @type {this} */
    	static instance;
    
    	/** * [getInstance 获取单例] * @method getInstance * @return {[type]} [description] */
    	static getInstance() { 
    		if (false === this.instance instanceof this) { 
    			this.instance = new this;
    		}
    		return this.instance;
    	}
      // needToken表示是否需要token 
      // getRaw 表示返回的数据是否返回第一层 
      // autoNotice 是否有 提示信息 就是是否调用 uni.showToast 方法 
    	async post(url, data = { }, needToken = false, getRaw = false, autoNotice = true) { 
    		//处理提交的数据
    		var postData = JSON.stringify(data);
    		postData = JSON.parse(postData);
    		var token = uni.getStorageSync('token');
    		if (!token) { 
    			if (needToken) { 
    				uni.reLaunch({ 
    					url: '/pages/login/login/login'
    				});
    				return false;
    			}
    		}else{ 
    			postData.token = token;
    		}
    		var [error, res] = await uni.request({ 
    			url: url_post + '/api/' + url,
    			method: 'POST',
    			dataType: 'json',
    			header: { 
    				'content-type': 'application/x-www-form-urlencoded'
    			},
    			data: postData,
    		})
    		if (res.data.code == 401) { 
    			//清存储
    			uni.clearStorageSync();
    			uni.reLaunch({ 
    				url: '/pages/login/login/login'
    			});
    			return false;
    		}
    		console.log(res);
    		if(error || res.data.code != 1) { 
    			if(autoNotice) { 
    				uni.showToast({ 
    					title:error || res.data.msg,
    					icon:"none"
    				})
    			}
    			return false;
    		}
    		if (getRaw) return res.data;
    		return res.data.data || res.data.msg || true;
    	}
    	in_array(search,array) { 
    		for(var i in array){ 
    			if(array[i] == search){ 
    				return true;
    			}
    		}
    		return false;
    	}
    }
    
    module.exports = model;

1.  第一变量设置跟路径

var url_img = 'http://yuerjia.wangchuangcode.cn'; //图片域名
    var url_post = 'http://yuerjia.wangchuangcode.cn'; //请求域名

1.  深拷贝 ，防止对数据的改变

var postData = JSON.stringify(data);
    	postData = JSON.parse(postData);

1.  配置token (如果需要带token发送请求的话)

1.  请求配置

var [error, res] = await uni.request({ 
    			url: url_post + '/api/' + url, // 配置路径
    			method: 'POST',   // 请求类型
    			dataType: 'json',   // 数据格式
    			header: { 
    				'content-type': 'application/x-www-form-urlencoded'
    			}, // 表单提交数据的编码类型
    			data: postData,
    		})

1.	表单数据提交数据的编码类型
       *	application/x-www-form-urlencoded	
       *	application/json
       *	multipart/form-data
       *	text/xml

**相关知识补冲**  
HTTP协议是以ASCLL码传输，建立在TCP/IP协议之上的应用层规范,规范把http请求分成了： 状态行 ， 请求头 ， 请求体  
并且规定 post的请求必须放在消息主体 (entity-body) 中，但是协议并没有规定数据的编码方式  
服务端通常是根据请求头(headers) 中的Content-type的字段来获知请求中的消息主体是用何种方式编码，然后对主体进行解析，so对于post提交数据包含Content-type和消息主体编码方式两部分

## 对于Content-type(表单数据提交数据的编码类型)的参数： ##

*  application/x-www-form-urlencoded  
    这个是post方式提交数据的最常见的方式，浏览器原生默认的就是该模式  
    它对提交的数据按照 key=val&key=val (键值对&键值对)的方式进行编码，key和val都进行了URL转码，它可以满足大部分服务器的需求
 *  application/json  
    这个是请求头的新兴贵族，这是对提交的数据按JSON数据处理  
    只要不考虑老版本的IE浏览器，基本上不会有任何问题  
    它的优点在于能支持更多的更复杂的数据结构，jquery的Ajax和vue的ajax都是用JSON数据格式
 *  multipart/form-data  
    这个是用于上传表单文件的时候用并且是必须的  
    消息主体是按字段个数又进行了结构的分类，每个分类的部分以 -boundary 开始，紧接着内容描述的信息，任何回车，然后是文本或者二进制内容。如果含有文件还含有文件名称和文件的类型等信息，最后在以 -boundary- 表示结束
 *  text/xml  
    XML-RPC是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范  
    XML-RPC 协议简单、功能够用，各种语言的实现都有。它的使用也很广泛，如 WordPress 的 XML-RPC Api，搜索引擎的 ping 服务等等。

1.  对401的处理，如果401表示token失效，重新登入即可

if (res.data.code == 401) { 
    			//清存储
    			uni.clearStorageSync();
    			uni.reLaunch({ 
    				url: '/pages/login/login/login'
    			});
    			return false;
    		}

1.  对错误或者成功的提示消息， res.data.code 为1表示成功  
    autoNotice是开头定义的参数，用于判断是否需要提示消息

if(error || res.data.code != 1) { 
    			if(autoNotice) { 
    				uni.showToast({ 
    					title:error || res.data.msg,
    					icon:"none"
    				})
    			}
    			return false;
    		}

1.  数据的回返，用getRaw来控制返回第几层数据，如果返回后面一层的数据，按情况返回，若实在没有，返回true

if (getRaw) return res.data;
    	return res.data.data || res.data.msg || true;