uni-app一课一得 （请求接口方法详解+请求接口Promise写法）

#原生态的请求接口写法

methods(){
    getSwiperList() {  //方法名
				uni.request({
					url: "你的数据接口",

					success: (res) => { //如果成功了
						// 打印数据
						console.log(res);
						// 如果请求成功，就把数据转存起来，方便页面使用
						this.swipeList = res.data.message; 
					},
					fail: (res) => {
						console.log('请求失败');
					    }
				    })
			    }
            }

console.log(res);中，res是请求接口返回的所有数据。你需要在res中，找到你所需的数据，你可以在控制台中观测到类似以下的数据结构

在上面的图中，我们可以看到，我们想要的数据在data下的message的里面（这是返回的数据），那我们就只需要按着数据结构写，就可以把接口数据赋值给this.swiperList了。

发起一个网络请求时，如果请求成功，这个API通常会提供一个响应对象作为回调函数的参数。在这个例子中，这个参数被命名为 res。

所以，你现在能理解这行代码的意思了吗？

	this.swipeList = res.data.message; 

在这里面，this.swiperList是在Vue组件的data函数中定义的一个属性或数据项。用来存储请求接口获得的数据。

如下：

data() {
			return {
				swipeList: [], // 轮播图数据
			};
		},

请求到数据后，你得调用 getSwiperList()方法（为了得到数据后，在页面渲染），但我们一般不在页面代码中调用，根据项目的实际功能，我需要页面加载时后就调用getgetSwiperList()方法，所以，我们可以把这个方法放到onLoad()函数中，让它帮我们使用这个方法。

如下：

onLoad() {
			 this.getSwiperList(); // 获取轮播图数据 
		},

然后，我们就可以到页面上，渲染swiper的数据了。

原生态完整代码

下面是完整代码参考：

<template>
	<view>
        <view class="swiper-box">  
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000"                     :duration="1000">
				<swiper-item class="swiper" v-for="(item,index) of swipeList" :key="index">
					<navigator :url="item.navigator_url">
						<!-- mode宽不变，高自动变化 -->
						<image :src="item.image_src" mode="widthFix"></image>	
						</navigator>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				swipeList: [], // 轮播图数据
			};
		},
		onLoad() {
			 this.getSwiperList(); // 获取轮播图数据 
		},
		methods: {
			
			// 轮播图请求（没有封装的)
			 getSwiperList() {
			 	uni.request({
			 		url: "请求接口",

			 		success: (res) => {
			 			// 打印数据
						console.log(res);
			 			// 把数据存起来
		 			    this.swipeList = res.data.message;
			 		},
			 		fail: (res) => {
			 			console.log('请求失败');
			 		}
			 	})
			 },
		}
	}
</script>

#接口的Promise写法

在开始之前，我们先思考，我们为什么不直接用原生态写法，而选择Promise写法呢？原因就在于，原生态写法太过于繁琐了，假如我们一个项目有多个接口，那我们每一个接口，就要写一个uni.request({})方法，而每个方法就要包含url、data、method、header，等等，这样代码很明显就变得多而杂，而用了Promise写法，在编写代码时，我们就可以使用async和await写法来简化请求接口代码了。

在写Promise前，我们要先创建一个.js文件 ，来放我们请求接口必写的和会用到的东西。

创建.js文件

我们先新建一个目录

给这个目录取名（取什么名都可以）

然后在shop-js目录下建.js文件

设置.js文件

这之后就可以获得一个空白的.js文件了

在这里面，我们就可以开始写param写法的请求接口了

Promise方法写请求接口

我们分段来看

export default (param) => {}

export default (param) => {}

这里的param英语翻译是参数的意思，它的作用也是当作一个请求参数，它是一个对象类型的请求参数

然后在里面写上请求接口要用上的东西

export default (param) => {
     var url = param.url,
		// 若在使用的那边写有method，那么就用写有的那个，没写有就默认get
		method = param.method||'get', //默认为Get
		header =param.header|| {},//请求头
		data = param.data || {},  //向服务器接口发请求时发送的数据 ,对象类型
		token = param.token || "",
		hideLoading = param.hideLoading || false; //隐藏加载动画
    }

在uni-app官方网站，请求接口的方法，会有几个常用的参数名（原生态写法）

url 、data 、method 、header

//官网的代码
uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    method："GET",
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

解释一下这里的代码：

export default (param) => {
     var url = param.url,
        // 若在使用的那边写有method，那么就用写有的那个，没写有就默认get
        method = param.method||'get', //默认为Get

        //这里的请求头后面有些，如果没有请求头，就默认为空对象{}
        header =param.header|| {},//请求头

        \\以下同上
        data = param.data || {},  //向服务器接口发请求时发送的数据 ,对象类型
        token = param.token || "",
        hideLoading = param.hideLoading || false; //隐藏加载动画
    }

url

因为我这个项目是多个接口，接口是一体的，所以我需要拼接url，这里面 const baseUrl = 你接口的公共部分

而下面的requestUrl =你接口的公共部分 + 你在页面里写的url的独特部分（就是 url = param.url)，

export default (param) => {
     var url = param.url,
		// 若在使用的那边写有method，那么就用写有的那个，没写有就默认get
		method = param.method||'get', //默认为Get
		header =param.header|| {},//请求头
		data = param.data || {},  //向服务器接口发请求时发送的数据 ,对象类型
		token = param.token || "",
		hideLoading = param.hideLoading || false; //隐藏加载动画

        //拼接完整请求地址
	    const baseUrl = 'https://api-接口公共部分'
	    var requestUrl = baseUrl + url;
    }

什么是接口公共部分？

以这个举例 url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。

https://www.example.com/request这是公共部分，而完整的接口可能是这样的

接口1：https://www.example.com/request/sreach    //搜索接口

接口2：https://www.example.com/request/detail        //详情接口

method & header

然后是method，请求头根据method的不同 ，而有不同的请求头

// param：对象类型，请求参数
export default (param) => {
	// uni.request(OBJECT): 参考官网   OBJECT：请求参数	
	    var url = param.url,
		// 若在使用的那边写有method，那么就用写有的那个，没写有就默认get
		method = param.method||'get', //默认为Get
		header =param.header|| {},//请求头
		data = param.data || {},  //向服务器接口发请求时发送的数据 ,对象类型
		token = param.token || "",
		hideLoading = param.hideLoading || false; //隐藏加载动画

	//拼接完整请求地址
	const baseUrl = 'https://api-接口公共部分'
	var requestUrl = baseUrl + url;

	//请求方式:GET或POST
	//POST方式需配置为： header: {'content-type' : "application/x-www-form-urlencoded"},)
	if (method) {
		method = method.toUpperCase(); //转换为大写
		if (method == "POST") {
			header = {
				'content-type': "application/x-www-form-urlencoded"
			};
		} else {
			header = {
				'content-type': "application/json"
			};
		}
	}
}

这里的加载动画就不解释了，不是重点

//加载圈
	if (!hideLoading) {
		//显示加载动画
		uni.showLoading({
			title: '加载中...'
		});
	}

返回promise

前面是准备工作的准备工作，接下来只要一个萝卜一个坑，把前面设置好的url,data,method...放进uni.request({ }）就好了，加载动画这个可写可不写。后面就是判断，请求接口是否成功的代码，一般请求接口用，code判断:200就是成功,不等于200错误（请求接口失败），uni.showToast方法是用于输出信息的。

若请求成功，就

// 将结果抛出
                resolve(res.data)  

return new Promise((resolve, reject) => {
		// 发请求
		uni.request({
			url: requestUrl,
			data: data,
			method: method,
			header: header,
			success: (res) => {
				uni.hideLoading();//隐藏加载动画
				// console.log(res)
				// 判断 请求api 格式是否正确
				if (res.statusCode && res.statusCode != 200) {
					uni.showToast({
						title: "api错误" + res.errMsg,
						icon: 'none'
					});
					return;
				}
				// code判断:200成功,不等于200错误
				if (res.data.meta.status) {
					if (res.data.meta.status != '200') {
						uni.showToast({
							title: "" + res.data.meta.msg,
							icon: 'none'
						});
						return;
					}
				}
				// 将结果抛出
				resolve(res.data)
			},
			//请求失败
			fail: (e) => {
				uni.hideLoading();//隐藏加载动画
				// console.log(e)
				uni.showToast({
					title: "" + e.data.msg,
					icon: 'none'
				});
				reject(e.data);
			}
			
		})
	})

完整的.js文件

// param：对象类型，请求参数
export default (param) => {
	// uni.request(OBJECT): 参考官网   OBJECT：请求参数	
	    var url = param.url,
		// 若在使用的那边写有method，那么就用写有的那个，没写有就默认get
		method = param.method||'get', //默认为Get
		header =param.header|| {},//请求头
		data = param.data || {},  //向服务器接口发请求时发送的数据 ,对象类型
		token = param.token || "",
		hideLoading = param.hideLoading || false; //隐藏加载动画

	//拼接完整请求地址
	const baseUrl = 'https:你接口的公共部分'
	var requestUrl = baseUrl + url;

	//请求方式:GET或POST
	//POST方式需配置为： header: {'content-type' : "application/x-www-form-urlencoded"},)
	if (method) {
		method = method.toUpperCase(); //转换为大写
		if (method == "POST") {
			header = {
				'content-type': "application/x-www-form-urlencoded"
			};
		} else {
			header = {
				'content-type': "application/json"
			};
		}
	}

	//加载圈
	if (!hideLoading) {
		//显示加载动画
		uni.showLoading({
			title: '加载中...'
		});
	}

	// 返回promise
	return new Promise((resolve, reject) => {
		// 发请求
		uni.request({
			url: requestUrl,
			data: data,
			method: method,
			header: header,
			success: (res) => {
				uni.hideLoading();//隐藏加载动画
				// console.log(res)
				// 判断 请求api 格式是否正确
				if (res.statusCode && res.statusCode != 200) {
					uni.showToast({
						title: "api错误" + res.errMsg,
						icon: 'none'
					});
					return;
				}
				// code判断:200成功,不等于200错误
				if (res.data.meta.status) {
					if (res.data.meta.status != '200') {
						uni.showToast({
							title: "" + res.data.meta.msg,
							icon: 'none'
						});
						return;
					}
				}
				// 将结果抛出
				resolve(res.data)
			},
			//请求失败
			fail: (e) => {
				uni.hideLoading();//隐藏加载动画
				// console.log(e)
				uni.showToast({
					title: "" + e.data.msg,
					icon: 'none'
				});
				reject(e.data);
			}
			
		})
	})
}

引入.js 使用.js

写完js文件后，我们要用它呀，怎么用呢？在全局文件main.js中引入它，这样整个项目都可以使用它了

这里做了几件事，

1.从'shop-js/shop.js'模块中导入了shop

2.使用Vue.prototype.$Shop = shop ；将shop附加到Vue的原型上，并命名为$Shop

然后，你就可以在Vue的任何组件中（或页面），通过this.$Shop来访问shop对象的属性和方法。

 页面使用.js

那么页面怎么使用.js呢？

通过上面我们知道，通过this.$Shop来访问，但我们该怎么写在页面上呢？用async 、 await方法

如下：

<template>
	<view>
        <view class="swiper-box">  
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000"                     :duration="1000">
				<swiper-item class="swiper" v-for="(item,index) of swipeList" :key="index">
					<navigator :url="item.navigator_url">
						<!-- mode宽不变，高自动变化 -->
						<image :src="item.image_src" mode="widthFix"></image>	
						</navigator>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				swipeList: [], // 轮播图数据
			};
		},
		onLoad() {
                this.getData();//获取全部数据
			 //this.getSwiperList(); // 获取轮播图数据 

		},
		methods: {
			
			// 轮播图请求（没有封装的)
			// getSwiperList() {
			//	uni.request({
			// 		url: "请求接口",

			// 		success: (res) => {
			// 			// 打印数据
			//			console.log(res);
			// 			// 把数据存起来
		 	//		    this.swipeList = res.data.message;
			// 		},
			// 		fail: (res) => {
			// 			console.log('请求失败');
			// 		}
			// 	})
			// },


                async getData(){
                    const res1=await this.$Shop({
					url:"接口的独特部分"
				})
                //打印数据
				console.log(res1);
                //转存数据  
				this.swipeList=res1.message;

                }
		}
	}
</script>

通过原生态的方法和Promise方法的对比，就可以看出代码的简洁了。

#总结

Promise接口写法的步骤：

1.创建目录和.js文件

2.在.js文件中写入接口请求必要的东西

3.在main.js中引入.js文件

4.页面通过async方法和this.$Shop来使用.js文件

最后，在这里放个uni-app的官网，方便学习uni-app的uni.request

uni.request(OBJECT) | uni-app官网 (dcloud.net.cn)