promise封装小程序api请求

最新推荐文章于 2025-12-21 06:39:03 发布

原创最新推荐文章于 2025-12-21 06:39:03 发布 · 184 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #前端

小程序专栏收录该内容

2 篇文章

订阅专栏

文章介绍了如何在uni-app中进行API的封装，以减少代码重复并提高后期维护性。首先在pages同级创建request文件夹和request.js，定义基础URL和请求方法。然后在request文件夹下建立api文件夹，导入request并创建具体的接口函数。最后在页面脚本中引入接口，调用获取数据如轮播图信息。

前言

api的封装减少代码量,后期更好的维护

第一步

在pages文件同级新建一个文件夹request在里面新建一个request.js文件

	const BASEURL =""//基准路径
const request =(params)=>{
	return new Promise((resolve,reject)=>{
		uni.showLoading({
			title:"加载中"
		})
		uni.request({
			url:BASEURL + params.url,//路径拼接
			method:params.method || "GET",//默认是GET
			data:params.data || "",
			success:res=>{//成功
				uni.hideLoading()
				resolve(res)// 将请求成功后得到的数据返回出去 可以用then方法接受到数据
			}
			
		})
	})
}
	
export default request

第二步

在request文件夹里新建一个api文件夹，在里面新建一个.js文件

import request from "../request.js"
export const queryBaeen=()=>{return request({url:"/api"})}

第三步

<script>

	import {queryBaeen} from "../../request/api/index.js"
	export default {
		data() {
			return {
				DataBaennt: [], //轮播图数据
			}
		},
		created() {
			// 调用轮播图数据
			this.getstr()
		},
		methods: {
			getstr() {
				// 轮播提
				queryBaeen().then((res) => {
					// 获取轮播图数据
					this.DataBaennt = res.data.data || []
				})
			}
		}
	}
</script>