[uniapp]请求数据与接口封装

最新推荐文章于 2024-07-19 12:58:53 发布

riverrun_z

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量183

点赞数 1

分类专栏： uniapp 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_48047636/article/details/125821164

版权

uniapp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

不封装时的请求

在methods定义getSwiper函数

		methods:{
			//获取轮播图数据
			getSwiper(){
				console.log("获取轮播图数据")
				uni.request({
					url:'http://localhost:8082/api/getlunbo',
					success:res=>{
						console.log(res)
						if(res.data.status!==0){
							return uni.showToast({
								title:"获取数据失败"
							})
						}
						this.swipers=res.data.message
					}
				})
			}
		}

在onload触发getSwiper函数

	onLoad() {
			this.getSwiper()
		},

在data函数返回一个本地数组

	data() {
			return {
				swipers: []
			}
		},

封装函数

在util下的api.js

const BASE_URL = 'http://localhost:8082'
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: '获取数据失败'
					})
				}
				resolve(res)
			},
			fail: (err)=>{
				uni.showToast({
					title: '请求接口失败'
				})
				reject(err)
			}
		})
	})
}

引入封装中暴露的模块

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

挂载到全局可用

Vue.prototype.$myRuquest = myRequest

在需要请求的页面发送请求

	methods:{
			//获取轮播图数据
			async getSwiper(){
				const res = await this.$myRuquest({
									url: '/api/getlunbo'
								})
				console.log(res)
				//把轮播图数据存到本地
				this.swipers=res.data.message
			}
		}