uni-app中的接口调用方式总结

以调取接口获取轮播图数据为例：

<template>
	<view>
		<swiper>
			<swiper-item v-for="(item,index) in carouselData" :key="index">
				<image :src="item.url"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default{
		data:{
			return{
				carouselData:[],
			}
		}
	}
</script>

第一种：uni.request({})

 uni.request({
      url:'请求地址',
      data:{'请求参数'},
      method:'请求方式',   //get、post、delete
      header:{'请求头'},
      success:res=>{},
      fail:()=>{},
      complete:=>{}
 })

第二种：uni.request({}).then(callback)

uni.request({
	url:'请求地址',
	data:{'请求参数'},
    method:'请求方式',   //get、post、delete
    header:{'请求头'},
}).then(result=>{
	// result将返回一个数组[error,{NativeData}]
	// error：调取接口的参数data有误时才不为null
	// NativeData：调取接口后返回的原生数据。
	let [error,res]=result;  //ES6对数组的解构
	if(res.statusCode===200){
		this.carouselData=res.data;
	}
	if(res.statusCode===404){
		console.log('找不到接口资源');
	}
})

第三种：在methods方法区利用 async/await 封装异步函数，然后再调用该函数

methods: {
	async request(){
		let result=await uni.request({
			url:'请求地址',
		});
		let [error,res]=result;  //ES6对数组的解构
		if(res.statusCode===200){
			this.carouselData=res.data;
		}
		if(res.statusCode===404){
			console.log('找不到接口资源');
		}
	}
},
onLoad(){
	this.request();
}

第四种：利用Promise封装 uni.request() 成像 this.$axios.get().then() 的形式
一、 创建一个对象，将该对象挂在Vue的原型下。

1、新建 @/common/request.js 文件
export default{
get(){}, //get方法对应 get 请求方式
post(){} //method方法对应 method 请求方式
}
2、进入main.js文件：
import request from ‘@/common/request.js’
Vue.prototype.$request=request;

二、在request.js文件中封装uni.request()。

//request.js文件内容

export default{	
	request(options){
		// ES6:promise实例之后才可以用.then，所以要创建promise实例
		return new Promise((resolve,reject)=>{ 
			uni.request({
				...options,    // ES6：解构对象
				success:res=>{
					if(options.native){
						resolve(res);
					};
					if(res.statusCode===200){
						resolve(res.data);
					}else{
						reject(res);
					}
				}
			})	
		})
	},
	get(url,data={},options={}){  //ES6方法：可以为形参赋默认值
		options.url=url;
		options.data=data;
		options.method='get';
		return this.request(options);
	},
	post(url,data={},options={}){
		options.url=url;
		options.data=data;
		options.method='post';
		return this.request(options);
	}
}

三、在页面中使用封装的函数
this.$request.get().then().catch();

<script>
	export default{
		onLoad:{
			let url='请求地址';
			let data={参数名:参数值};
			let native={native:布尔值};  //true:接口返回原生数据，false返回非原生数据
			this.$request.get(url,data,native).then(res=>{
				this.carouselData=res;
			}).catch(res=>{
				console.error(res);
			});	
		}
	}
	
</script>

第四种方法中用到了ES6的以下知识点：

1、…扩展运算符
2、对数组和对象的解构
3、Promise