uni-app 简单的请求封装

AS、SD

于 2021-05-17 11:26:43 发布

阅读量121

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.csdn.net/qq_42988102/article/details/116921877

uni-app 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在uni-app项目中封装请求方法，并实现全局注册，方便各页面调用。通过创建util目录及api.js文件来定义请求逻辑，包括错误处理等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在项目里创建util目录，目录下创建js文件，如：api.js

const BASE_URL = 'http://baidu.com/'  //服务器域名

export const myRequest=(options)=>{
	return new Promise((resolve,reject)=>{
		uni.request({
			url:BASE_URL+options.url,
			method:options.method || 'GET',
			data:options.data || {},
			success:(res)=>{
				if(res.data.status !==0){
					return uni.showToast({
						title:'获取数据失败',
						icon:"none"
					})
				}
				resolve(res)
			},
			fail:(err)=>{
				uni.showToast({
					title:'请求接口失败',
					icon:"none"
				})
				reject(err)
			}
		})
	})
}

2、在项目main.js里面进行全局注册

import {myRequest} from 'util/api.js'

Vue.prototype.$myRequest =myRequest

3、在页面中引用

async getSwipers(){
	const res = await this.$myRequest({
		url:'xxxx'  //接口路径
	})
	var list= res.data  //返回的结果
},