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

最近使用uniapp写小程序，但是没有合适的数据请求，于是自己熬夜写了一个。下面是对于代码的解释:请求的初步封装export default class request {// 配置项constructor(options) {//请求公共地址this.baseUrl = options.baseUrl || "";//公共文件上传请求地址this.fileUrl = options.fileUr

张续栋

10366人浏览 · 2020-06-10 18:04:47

张续栋 · 2020-06-10 18:04:47 发布

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

请求的初步封装

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);
				}
			};
	
}

跟地址，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;