uniapp封装,封装狂魔

   utils/request.js

//导出方法
// 1.直接导出 用 export导出声明的变量  
// export const xx = ({})=>{}
// 2.模块导出如下module.exports = {}
//注意:直接导出的需要使用解构赋值{} 不能直接引文件名


// 1 封装公共请求接口方法
export const http = ({
	url,
	data = "",
	method = "get"
}) => {
	// 2 请求前加载 最后在请求后隐藏
	uni.showLoading({
		title: "拼命加载中..."
	})
	// 3 Promise 
	return new Promise((resolve, reject) => {
		uni.request({
			url: 'https://api-hmugo-web.itheima.net/api/public/v1' + url,
			data,
			method,
			timeout: 6000,
			success: (res) => {
				resolve(res.data)
			},

			fail: (err) => {
				reject(err)
			},
			complete() {
				uni.hideLoading()
			}
		})
	})
};

// 2 封装成功提示   使用:toast({}) 或 toast({title:"请求失败"，icon:"error"})
export const toast = ({
	title = '请求成功',
	icon = 'succes',
	duration = 1500,
}) => {
	uni.showToast({
		title,
		duration,
		icon,
	})
};

//3 封装跳转 函数形式  这种可以直接挂载到vue原型上使用的时候不需要引入
// export  function router ({url='',type='navigateTo',}) {
// 	uni[type]({
// 		url
// 	})
// };

//3 封装跳转 形参形式 router({url='xx',type='xx'})
export const router = ({
	url = '',
	type = 'navigateTo'
}) => {
	uni[type]({
		url
	})
};

    utils/api.js

import {
	http
} from './http.js'
// 获取轮播图
export const getSwiper = async () => http({
	url: '/home/swiperdata'
})
// 获取分类导航
export const getType = async () => http({
	url: '/home/catitems'
})
// 获取楼层
export const getItem = async () => http({
	url: '/home/floordata'
})
// 获取分类数据
export const getCates = async () => http({
	url: '/categories'
})
// 搜索数据
export const getSearchList = async (key) => http({
	url: '/goods/search',
	data: {
		...key
	}
})

在页面使用

<template>
	<view class="container">
		<my-search></my-search>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in swiper" :key="item.goods_id">
				<view class="swiper-item">
					<image class="swiper-image" :src="item.image_src" mode="scaleToFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 导航 -->
		<view class="navs">
			<navigator v-for="item in navs" :key="item.name">
				<image class="nav-image" :src="item.image_src" mode="scaleToFill"></image>
			</navigator>
		</view>
		<!-- 底部 -->
		<view class="floors">
			<view class="floors-list" v-for="(item, i) in floors" :key="i">
				<image class="title-image" :src="item.floor_title.image_src" mode="scaleToFill"></image>
				<view class="good-box">
					<navigator class="nav" :class="'nav' + index" :url="'/pages' + it.navigator_url" :key="index"
						v-for="(it, index) in item.product_list">
						<image :src="it.image_src" mode="scaleToFill"></image>
					</navigator>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getSwiper,
		getType,
		getItem
	} from '../../utils/api.js'
	import {
		toast,
		router
	} from '../../utils/http.js'
	import mySearch from '../../components/mySearch/mySearch.vue'
	export default {
		components: {
			mySearch
		},
		data() {
			return {
				swiper: [],
				navs: [],
				floors: []
			}
		},
		async created() {
			// 请求轮播图数据的方法
			let swiper = await getSwiper()
			// if (swiper.meta.status != 200) return toast({
			// 	title: '请求失败',
			// 	icon: 'error',
			// })
			this.swiper = swiper.message
			// 请求分类导航数据的方法
			let navs = await getType()
			this.navs = navs.message
			// 请求楼层数据信息
			let items = await getItem()
			console.log(items);
			this.floors = items.message
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #fff;

		swiper {
			height: 500rpx;
		}

		.swiper-image {
			width: 100%;
			height: 500rpx;
		}
	}

	.navs {
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;

		navigator {
			width: 160rpx;
			height: 160rpx;

			.nav-image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.floors-list {
		margin-top: 30rpx;
	}

	.title-image {
		width: 100%;
		height: 80rpx;
	}

	.good-box {
		width: 100%;
		overflow: hidden;

		.nav {
			float: left;
			width: 230rpx;
			height: 200rpx;
			padding: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.nav0 {
			height: 420rpx;
		}
	}
</style>

完毕

Thankfulness is the quickest path to joy.
懂得感恩的人，更容易收获快乐。