uni-app中调取接口的三种方式与封装uni.request()

最新推荐文章于 2025-11-25 17:04:50 发布

原创最新推荐文章于 2025-11-25 17:04:50 发布 · 8.9k 阅读

14 ·

CC 4.0 BY-SA版权

uni-app 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了uni-app中调用接口的三种方法：uni.request基础使用、Promise链式调用及async/await异步处理，同时分享了如何封装uni.request以简化API调用流程，提高代码复用性和维护性。

一、uni-app中调取接口的三种方式

1、uni.request({})

uni.request({
	url:'/api/getIndexCarousel.jsp',
	method:'get',
	success:res=>{
		console.log(res.data);
		this.carouselData = res.data
	}
})

2、uni.request({}).then()

uni.request({
	url:'/api/getIndexCarousel.jsp',
	method:'get',
}).then((result)=>{
	let [error,res] = result;
	//result将返回一个数组[error,{NativeData}]
	//NativeData：调取接口后返回的原生数据
	if(res.statusCode === 200){
		this.carouselData = res.data
	}
	if(res.statusCode === 404){
		console.log('请求的接口没有找到');
	}
})

3、async/await

async：用在函数定义的前面
async request(){	//函数体;}
await：用在标明了async关键字的函数内部，异步操作的前面。

onLoad() {
	this.request();
},
methods: {
	async request(){
		let result = await uni.request({
			url:'/api/getIndexCarousel.jsp'
		})
		console.log(result)
		let [err,res] = result;
		if(res.statusCode === 200){
			this.carouselData = res.data;
		}
	}
}

二、封装uni.request();

1、创建一个对象，将该对象挂在Vue的原型下

新建@/common/request.js文件

初步写法（仅供参考）：

export default {
	request(options){
		uni.request({
			...options,
			success:res=>{
				console.log(res)
			}
		})
	},
	get(url,data={},options={}){
		options.url=url,
		options.data=data,
		options.method='get',
		this.request(options)
	},
	post(url,data={},options={}){
		options.url=url,
		options.data=data,
		options.method='post',
		this.request(options)
	}
}

二次更改：

export default{
	//封装uni.request()：
	request(options){
		return new Promise((resolve,reject)=>{
			//书写异步操作的代码
			uni.request({
				...options,
				success:res=>{
					if(options.native){
						resolve(res)	//调取接口后返回的原生数据	
					}
					if(res.statusCode === 200){
						resolve(res.data)	//异步操作执行成功
					}else{
						console.log('请求的接口没有找到');
						reject(res) 	//异步操作执行失败
					}
				}
			})
		})
	},
	get(url,data={},options={}){
		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)
	}

}

2、进入main.js文件

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

例：在任意文件中书写下列代码可以调用。this.$Z.get();

3、在页面中调用

//封装uni.request()：
this.$Z.get('/api/getIndexCarousel.jsp',{},{
	native:false
}).then(res=>{
	//异步操作成功
	console.log(res)
}).catch(res=>{
	//异步操作失败
	console.log(res)
}).finally(res=>{
	//异步操作完成
});