封装uni.request()

vue中的axios使用方法：

 this.$axios.get(url,data).then();

我们封装一个模拟的vue中的axios，以方便整个项目的使用，来节省代码量

   this.$H.get(url,data,options).then();
    this.$H.post().then();
    this.$H.delete().then();

1、创建一个对象，将该对象挂在Vue的原型下。
新建 @/common/request.js 文件

         export default {
            get(){},
            post(){}
          }

2、进入main.js文件：

这里的$H将来在各个页面中就好比$axais

       import request from '@/common/request.js'
       Vue.prototype.$H=request;

例：在任意文件中书写下列代码可以调用。

  this.$H.get();

3、this.$H.get('/api/getIndexCarousel.jsp');
以上是封装的初步思想

以下是具体封装

1、创建一个对象，将该对象挂在Vue的原型下。
新建 @/common/request.js 文件

例：在任意文件中书写下列代码可以调用。
封装的中心思想是Promise对象解决异步

//页面中想用.then()就必须是Prnmise实例
export default {
	request(options){
		return new Promise((resolve,reject)=>{//把调取的的接口给了一个Promise实例
			uni.request({//uni-app调接口
			...options,//所有的数据通过options传过来
			success:res=>{
				if(options.native){
				//假如用户得到res的原型数据，就在页面第三个参数把native：true就好了
					resolve(res)
				}
				if(res.statusCode===200){
				//等于200证明请求接口成功，就把里面的data数据给用户返回，
				//这里只返回data数据，用户想要原型数据，就在页面的第三个参数里写:native：true
					resolve(res.data)
				}else{
				//调取接口错误时返回给程序员
					reject(res)
				}
			}
		})
		})
		
	},
	//get方法
	get(url,data={},options={}){
		options.url=url
		options.data=data
		options.method="get"
		return this.request(options)
	},
	//post方法
	post(url,data={},options={}){
		options.url=url
		options.data=data
		options.method="post"
		return this.request(options)
	}
}

在页面onLoad中调用接口(具体调用接口位置根据项目需求)

onLoad(){
	this.$H.get("/api/getIndexCarousel6.jsp",{},{
		// native取值为false，表示不需要原型数据，也可以直接不写
		 native:false
	 }).then(res=>{
		console.log(res)
		this.swiperData=res.data
	}).catch(res=>{
		//调取接口失败的提醒
		console.error(res)
	})
},

如果只是简单的调取接口如下：

onLoad(){
	this.$H.get("/api/getIndexCarousel6.jsp").then(res=>{
		this.swiperData=res
	})
},

完毕，有问题留言小编…