[JavaScript知识库]封装uni.request请求

未封装uni.request写法

onload(){
	this.__init();
},
method:{
	__init(
		uni.request({
		url:'http://本地ip:3000/api/index_list/topbar_data',
		success: (res) => {
			let data = res.data.data;
			this.topBar = data.topBar;
			this.newTopBar = this.initData(data);
		},
		fail: (err) => {
			console.log('请求失败',err)
		}
})
	)
}

建立一个request.js文件对uni.request进行封装

export default{
	common:{
		baseUrl:"http://本地ip:3000/api",
		data:{},
		header:{
			"content-type":"application/json",
			"content-type":"application/x-www-form-urlencoded"
		},
		method:"GET",
		dataType:"json"
	},
	request( options={} ){
		
		uni.showLoading({
			title:'加载中'
		})
		
		options.url = this.common.baseUrl + options.url;
		options.data = options.data || this.common.data;
		options.header = options.header || this.common.header;
		options.method = options.method || this.common.method;
		options.dataType = options.dataType || this.common.dataType;
		return new Promise((resolve,reject)=>{
			uni.request({
				...options,
				success: (result) => {
					if(result.statusCode != 200){
						return reject();
					}
					let data = result.data.data;
					resolve(data);
					
					setTimeout(function () {
					    uni.hideLoading();
					}, 1000);
				}
			})
		})
	},
}

调用封装之后的request方法

__init(){
	$http.request({
		url:'/index_list/topbar_data',
		}).then((res)=>{
			this.topBar = res.topBar;
			this.newTopBar = this.initData(res);
		}).catch((rej)=>{
			uni.showToast({
				title:'请求失败',
				icon:'none'
			})
			console.log('请求失败',rej);
		})
}