Asynchronous uniapp applet package (get / post / delete / put) the common (with full code)

Raised prospects:

Too much duplicate code, or presented succinctly.

Submitted before the question:

Vue applets and also this time to learn. For me, just learning a language would present his public part for me is difficult (I do not know the syntax and vue and can interact directly js, how to come up with better public script code needs to re-use) .

Try to put forward:

Put forward at the beginning of it, I think that directly create a Tools folder, then inside .vue write asynchronous code suffix file export export, import it ok to use where it is needed, however, to imagine very good, the reality is very skinny ah. Write, try to time it :( Well, uniapp compiler, development tools, micro-channel view because it is a small program) compiled the results have failed ... okay look for information online it.

Formally proposed:
Let's take a look at my little program directory structure
Here Insert Picture DescriptionI hit the arrow where it is, I put in the position of a common project of asynchronous modules. There follow a common code can be written in one or more files repeated here, but remember to export, import and local need.
Haha, I do not know how to export, import?To, we then see below. I'll teach you (I also learned how to skillfully fact very simple)
I'll just paste code (which is part of the common methods and how to export).

	// 预处理返回的数据,防止后台服务不在线时,返回不合法数据
	 function preHandleResult(res) {
		 // if (res.errMsg.trim() != "request:ok") {
			// showTip.showSuccessTip("后台服务不在线...", 2500);
		  //}
		 // success: (res) => {
			 // console.log(1);
		 // }
	 }
	 // 请求末尾加token
	 function appendToken (url) {
		 if (url.indexOf("?") == -1) {
		 		url += "?"
		 	} else {
		 		url += "&"
		 	}
		 	url += "access_token=" + accesstoken;
		 	return url;
	 } 
 
	 // appendToken(url) 
	 function request_get (url, param, successCallback, failCallback) {
		var _this = this;
		uni.request({
		    url: url, 
		    data: param,
			dataType: 'json',
			method: 'GET',
		    header: {
		        'custom-header': 'get', //自定义请求头信息
				'content-type': 'application/json' // 默认返回json格式,可以不加(加上是为了后面方便维护)
		    },
		    success: (res) => {
				preHandleResult(res);
				if(successCallback){
					 successCallback(res);
				}
		    },
			fail: (res) => {
				preHandleResult(res);
				if(failCallback){
					 failCallback(res);
				}
			}
		});
	 }
	
	 function request_post (url, param, successCallback, failCallback) {
		var _this = this;
		uni.request({
		    url: url, 
		    data: param,
			dataType: 'json',
			method: 'POST',
		    header: {
		        'custom-header': 'post',
				'content-type': 'application/json'
		    },
		    success: (res) => {
				preHandleResult(res);
				if(successCallback){
					 successCallback(res);
				}
		    },
			fail: (res) => {
				preHandleResult(res);
				if(failCallback){
					 failCallback(res);
				}
			}
		});
	 }
	 
	 function request_put (url, param, successCallback, failCallback) {
	  	var _this = this;
	  	uni.request({
	  	    url: url, 
	  	    data: param,
	  		dataType: 'json',
	  		method: 'PUT',
	  	    header: {
	  	        'custom-header': 'put',
	  			'content-type': 'application/json'
	  	    },
	  	    success: (res) => {
	  			preHandleResult(res);
	  			if(successCallback){
	  				 successCallback(res);
	  			}
	  	    },
	  		fail: (res) => {
	  			preHandleResult(res);
	  			if(failCallback){
	  				 failCallback(res);
	  			}
	  		}
	  	});
	 }
	 
	 function request_delete (url, param, successCallback, failCallback) {
	  	var _this = this;
	  	uni.request({
	  	    url: url, 
	  	    data: param,
	  		dataType: 'json',
	  		method: 'DELETE',
	  	    header: {
	  	        'custom-header': 'delete',
	  			'content-type': 'application/json'
	  	    },
	  	    success: (res) => {
	  			preHandleResult(res);
	  			if(successCallback){
	  				 successCallback(res);
	  			}
	  	    },
	  		fail: (res) => {
	  			preHandleResult(res);
	  			if(failCallback){
	  				 failCallback(res);
	  			}
	  		}
	  	});
	 }
	 // 上面就是异步请求get/post/put/delete的封装了,到时候你直接导入正确传入参数就可以用这里的异步请求方法了。
	 // 当然需要先导出去,你才能导入其他地方引用。下面这就是导出。
	 // 你调用的时候是调 url_Request_get(url,param,success,fail) 方法。而不是function request_get(url,param,success,fail);
	 // 既然都导出去了,那我们就去别的地方引用去。
	export default {
			url_Request_get: function (url, param, success, fail) {
				return request_get (url, param, success, fail);
			},
			url_Request_post: function (url, param, success, fail) {
				return request_post (url,param,success,fail);
			},
			url_Request_put: function (url, param, success, fail) {
				return request_put (url,param,success,fail);
			},
			url_Request_delete: function (url, param, success, fail) {
				return request_delete (url,param,success,fail);
			}
		}

This part is introduced into the common application

	<script>
	import http from '../../common/ajax.js';
	import showTip from '../../common/showTips.js';	
直接在你的应用页这样导入就好了,位置你自己放。这里是个参考。

Here Insert Picture Description
Here you can name yourself free to take, of course, do not take some of the best keywords. (I am here just a demo)

Like a point, or leave the eye and then go

Published 16 original articles · won praise 9 · views 4875

Guess you like

Origin blog.csdn.net/Ambitiouss/article/details/100971307