uniapp中使用vue语法封装接口

前言:使用uniapp开发移动端，uniapp使用的是vue的语法，小程序的api，所以使用起来比较容易上手

1.新建一个js,request.js
2.在request.js中封装接口，封装了同步和异步两种形式的接口，又分为普通封装和promise封装

具体代码如下：

//服务器ip
const baseUrl="http://ip:port";
const wechatUrl="微信url";
//本地ip
const localUrl="http://ip:port"
var tempUrl=baseUrl;
let header={};
//异步封装,flag=1 baseUrl，flag=2 wechatUrl
let getRequest = (flag,url,params) => {
	if(flag==2){
		tempUrl=wechatUrl;
	}
	 return	uni.request({
			url:tempUrl+url,
			header:header,
			data:params,
			dataType:'json',
			method:'GET'
		})
};
let postRequest = (flag,url,params) => {
	if(flag==2){
		tempUrl=wechatUrl;
	}
	 return	uni.request({
			url:tempUrl+url,
			header:header,
			data:params,
			dataType:'json',
			method:'POST'
		})
};
//同步封装
let promisePostRequest = (flag,url,params) => {
	if(flag==2){
		tempUrl=wechatUrl;
	}
	return new Promise((resolve, reject) => {
	        uni.request({
	            url:tempUrl+url,
	            header:header,
	            data:params,
	            dataType:'json',
	            method:'POST',
	            success: (res) => {
	                console.log(res)
	                resolve(res);
	            },
	            fail: (err) => {
	                reject(err)
	            }
	        });
	    })
}
let promiseGetRequest = (flag,url,params) => {
	if(flag==2){
		tempUrl=wechatUrl;
	}
	return new Promise((resolve, reject) => {
	        uni.request({
	            url:tempUrl+url,
	            header:header,
	            data:params,
	            dataType:'json',
	            method:'GET',
	            success: (res) => {
	                console.log(res)
	                resolve(res);
	            },
	            fail: (err) => {
	                reject(err)
	            }
	        });
	    })
}
export default{
	getRequest,
	postRequest,
	promisePostRequest,
	promiseGetRequest,
	baseUrl,
	wechatUrl,
	localUrl
}

接口封装完成之后，便可以在其他页面直接调用接口，但是需要注意的是vue页面中调用同步接口的话要使用async+await,异步接口正常使用！！！

 //同步接口一，不带回调
async courseChance(){
	let chance=await this.request.promiseGetRequest(1,'接口地址',{参数});
					 // console.log(chance)
	 if(chance.data.code==0){
			this.stuRatio=chance.data.series;
	 }else{
			console.log("数据发生异常");
		  }
	 }


//同步接口二，带回调					
async stuStatics(){
		let check=await this.request.promiseGetRequest(1,'接口地址',{参数})
		.then(res=>{
				// console.log(res.data)
				//定义数组或list
				var dataparam=[];
				var normal=[];
				var ask=[];
				var late=[];
				var early=[];
				var len=res.data.series;
				if(res.data.code==0){
				 	for(var i=0;i<len.length;i++){				 									
				 		dataparam.push(len[i].name);
						normal.push(len[i].normal);
						ask.push(len[i].ask);
						late.push(len[i].late);
				 		early.push(len[i].early);
				}
			this.lineInitStatics(dataparam,normal,ask,late,early)
				}
				})
				 					
	 }