uniapp的请求封装（含post ,get,put ,delete）

男娘i 2023-02-17 02:16 27阅读 0赞

最近使用uniapp写小程序，但是没有合适的数据请求，于是自己熬夜写了一个。  
[这是对应代码的下载链接][Link 1]  
也可以直接找我要代码  
下面是对于代码的解释:

1.  请求的初步封装

export default class request { 
    	// 配置项
    	constructor(options) { 
    		//请求公共地址
    		this.baseUrl = options.baseUrl || "";
    		//公共文件上传请求地址
    		this.fileUrl = options.fileUrl || "";
    		//默认请求头
    		this.header = options.header || { };
    		//默认配置
    		this.config = { 
    		// 这是对于接口的错误是否提示
    			isPrompt: options.isPrompt === false ? false : true,
    			// 是否加载动画提示
    			load: options.load === false ? false : true,
    			// 是否需要token
    			needToken: options.needToken === false ? false : true, 
    			// 公共数据的处理
    			isFactory: options.isFactory === false ? false : true,
    			loadMore: options.loadMore === false ? false : true
    		};
    	}
    
    	// 获取默认信息
    	getDefault(data, options = { }) { 
    		//判断url是不是链接
    		let urlType = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~/])+$/.test(data.url);
    		let config = Object.assign({ }, this.config, options, data);
    		if (data.method == "FILE") { 
    			config.url = urlType ? data.url : this.fileUrl + data.url;
    		} else { 
    			config.url = urlType ? data.url : this.baseUrl + data.url;
    		}
    		//请求头
    		if (options.header) { 
    			config.header = Object.assign({ }, this.header, options.header);
    		} else if (data.header) { 
    			config.header = Object.assign({ }, this.header, data.header);
    		} else { 
    			config.header = this.header;
    		}
    		return config;
    	}
    
    	//post请求
    	post(url = '', data = { }, options = { }) { 
    		return this.request({ 
    			method: "POST",
    			data: data,
    			url: url,
    			...options
    		});
    	}
    
    	//get请求
    	get(url = '', data = { }, options = { }) { 
    		return this.request({ 
    			method: "GET",
    			data: data,
    			url: url,
    			...options
    		});
    	}
    
    	//put请求
    	put(url = '', data = { }, options = { }) { 
    		return this.request({ 
    			method: "PUT",
    			data: data,
    			url: url,
    			...options
    		});
    	}
    
    	//delete请求
    	delete(url = '', data = { }, options = { }) { 
    		return this.request({ 
    			method: "DELETE",
    			data: data,
    			url: url,
    			...options
    		});
    	}
    
    	//接口请求方法
    	request(data) { 
    			const _this = this;
    		return new Promise((resolve, reject) => { 
    			if (!data.url) { 
    				console.log("request缺失数据url");
    				reject({ 
    					errMsg: "缺失数据url",
    					statusCode: 0
    				});
    				return;
    			}
    			let requestInfo = this.getDefault(data);
    			//请求前回调
    			if (_this.requestStart) { 
    				let requestStart = this.requestStart(requestInfo);
    				if (typeof requestStart == "object") { 
    					requestInfo.data = requestStart.data;
    					requestInfo.header = requestStart.header;
    					requestInfo.isPrompt = requestStart.isPrompt;
    					requestInfo.needToken = requestStart.needToken;
    					requestInfo.load = requestStart.load;
    					requestInfo.isFactory = requestStart.isFactory;
    				} else { 
    					//请求完成回调
    					_this.requestEnd && _this.requestEnd(requestInfo, { 
    						errMsg: "请求开始拦截器未通过",
    						statusCode: 0
    					});
    					reject({ 
    						errMsg: "请求开始拦截器未通过",
    						statusCode: 0
    					});
    					return;
    				}
    			}
    			let requestData = { 
    				url: requestInfo.url,
    				header: requestInfo.header, //加入请求头
    				success: (res) => { 
    					//请求完成回调
    					this.requestEnd && this.requestEnd(requestInfo, res);
    					//是否用外部的数据处理方法
    					if (requestInfo.isFactory && this.dataFactory) { 
    						//数据处理
    						this.dataFactory({ 
    							...requestInfo,
    							response: res,
    							resolve: resolve,
    							reject: reject
    						});
    					} else { 
    						resolve(res);
    					}
    				},
    				fail: (err) => { 
    					console.log("err");
    					//请求完成回调
    					this.requestEnd && this.requestEnd(requestInfo, err);
    					reject(err);
    				}
    			};
    	
    }

1.  跟地址，token的配置，请求拦截和响应拦截

import request from "./request";
    // 全局配置的请求域名
    let baseUrl = "http://sunshine.createnetwork.cn/api/";
    //可以new多个request来支持多个域名请求
    let $http = new request({ 
    	//接口请求地址
    	baseUrl: baseUrl,
    	//设置请求头（如果使用报错跨域问题，可能是content-type请求类型和后台那边设置的不一致）
    	header: { 
    		'content-type': 'application/json;charset=UTF-8'
    	},
    	//以下是默认值可不写
    	//是否提示--默认提示
    	isPrompt: true,
    	// 1 请求是否带token 默认带token
    	needToken: true,
    	//是否显示请求动画
    	load: true,
    	//是否使用处理数据模板
    	isFactory: true
    });
    
    
    
    //当前接口请求数
    let requestNum = 0;
    //请求开始拦截器
    $http.requestStart = function(options) { 
    	if (options.load) { 
    		if (requestNum <= 0) { 
    			//打开加载动画
    			uni.showLoading({ 
    				title: '加载中',   
    				mask: true
    			});
    		}
    		requestNum += 1;
    	}
    	
    
    	if (options.needToken){ 
    		//请求前加入token
    			if(options.needToken){ 
    				
    			}
    			// 这个是异步获取token 应该是同步获取
    			// let token =""
    			// uni.getStorage({ 
    			// key: 'Authorization',
    			// success: function (res) { 
    			// console.log(res.data,6);
    			// token = res.data
    			// }
    			// });
    			 const token = uni.getStorageSync('Authorization');
    
    			if (!token) { 
    				console.log(token,6);
    						if (options.needToken) { 
    							// uni.reLaunch({ 
    							// // 如果没有token就转跳到登入页面
    							// url: '../pages/login/logi'
    							// });
    							// return false;
    							uni.showModal({ 
    								title: '温馨提示',
    								content: '此时此刻需要您登录喔~',
    								confirmText: "去登录",
    								cancelText: "再逛会",
    								success: res2 => { 
    									loginPopupNum--;
    									if (res2.confirm) { 
    										uni.navigateTo({ 
    											url: "../../pages/login/login"
    										});
    									}
    								}
    							});
    						}
    					}
    				// 请求头中配置token 
    			options.header['Authorization'] = 'Bearer ' + token 
    			
    		}
    		return options;
    	}
    	
    //请求结束 响应拦截
    $http.requestEnd = function(options, resolve) { 
    	//判断当前接口是否需要加载动画 
    	if (options.load) { 
    		requestNum = requestNum - 1;
    		if (requestNum <= 0) { 
    			uni.hideLoading();
    		}
    	}
    	if (resolve.errMsg && resolve.statusCode && resolve.statusCode > 300) { 
    		setTimeout(() => { 
    			uni.showToast({ 
    				title: "网络错误，请检查一下网络",
    				icon: "none"
    			});
    		}, 500);
    	}
    	// if()
    }
    //登录弹窗次数
    let loginPopupNum = 0;
    //所有接口数据处理（可在接口里设置不调用此方法）
    //此方法需要开发者根据各自的接口返回类型修改，以下只是模板
    $http.dataFactory = function(res) { 
    	console.log("接口请求数据", { 
    		httpUrl: res.url,
    		resolve: res.response,
    		header: res.header,
    		data: res.data,
    		method: res.method,
    	});
    	// 判断接口请求是否成功
    	console.log(res.response.statusCode,10);
    	if (res.response.statusCode || res.response.statusCode == 200) { 
    		
    		let httpData = res.response.data;
    		
    		
    		console.log(httpData.success);
    		//判断数据是否请求成功
    		if (res.response.statusCode == 200 || res.response.statusCode == 201) { 
    			// 返回正确的结果(then接受数据)
    			res.resolve(httpData);
    			console.log(res.response.statusCode,res.resolve(httpData.data));
    			
    		} else if (res.response.statusCode == 401  || res.response.statusCode == 403) {  
    			// 对401 403的处理
    			// 刷新token
    			$http.put('authorizations/current').
    			then(function (response) { 
    				//这里只会在接口是成功状态返回
    				// 返回成功再次存储 token数据
    					 uni.setStorageSync('Authorization', response);
    					
    					
    			}).catch(function (error) { 	
    				//这里只会在接口是失败状态返回，不需要去处理错误提示
    				console.log(error);
    			});
    			// 返回错误的结果(catch接受数据)
    			res.reject(res.response);
    		} else {  //其他错误提示
    			if (res.isPrompt) {  //设置可以提示的时候
    				setTimeout(function() { 
    					uni.showToast({ 
    						// title: httpData.info, //提示后台接口抛出的错误信息
    						title: httpData.info,
    						icon: "none",
    						duration: 3000
    					});
    				}, 500);
    			}
    			// 返回错误的结果(catch接受数据)
    			res.reject(res.response);
    		}
    
    		
    
    	} else { 
    		// 返回错误的结果(catch接受数据)
    		res.reject(res.response);
    	}
    };
    export default $http;

[Link 1]: https://download.csdn.net/download/qq_44984407/12511112