EP21 Promise封装request请求

文件路径： E:/homework/uniappv3tswallpaper/utils/requset.js

utils 文件夹中创建一个新的 request 文件。

const BaseUrl = "https://tea.qingnian8.com/api/bizhi"export function request(config = {}) {return new Promise((resolve, reject) => {let {url,header = {},method = "GET"} = configurl = BaseUrl + urlheader['access-key'] = "guagua"uni.request({url,header,method,success: res => {if (res.data.errCode === 0) {resolve(res)} else if (res.data.errCode === 400) {uni.showModal({title: '错误信息',content: res.data.errMsg,showCancel: false})reject(res.data)} else {uni.showToast({title: res.data.errMsg,icon: "none"})reject(res.data)}},fail: err => {reject(err)}})})
}

文件路径： E:/homework/uniappv3tswallpaper/api/apis.js

创建一个新的 api 文件。

import {request
} from "@/utils/requset.js"export function apiGetBanner() {return request({url: "/homeBanner"})
}
export function apiGetDayRandom() {return request({url: "/randomWall"})
}

文件路径： E:/homework/uniappv3tswallpaper/pages/index/index.vue

修改后的 index 文件。

<template><view class="homeLayout pageBg"><custom-nav-bar title="推荐"></custom-nav-bar><view class="banner"><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true"indicator-color="rgba(255,255,255,0.5)" indicator-active-color="rgba(255,255,255,1)"><swiper-item v-for="item in bannerList" :key="item._id"><image :src="item.picurl" mode="scaleToFill"></image></swiper-item></swiper></view><view class="notice"><view class="left"><uni-icons type="sound-filled" size="20"></uni-icons><text class="text">公告</text></view><view class="center"><swiper :autoplay="true" :interval="3000" :duration="1000" circular vertical><swiper-item v-for="item in noticeList" :key="item._id"><navigator url="/pages/notice/detail">{{item.title}}</navigator></swiper-item></swiper></view><view class="right"><uni-icons type="forward" size="16" color="#333"></uni-icons></view></view><view class="select"><common-title><template #name>每日推荐</template><template #custom><view class="date"><uni-icons type="calendar"></uni-icons><view class="text"><uni-dateformat :date="Date.now()" format="dd号" /></view></view></template></common-title><view class="content"><scroll-view scroll-x="true"><view class="box" v-for="item in randomList" :key="item._id" @click="goPreview"><image :src="item.smallPicurl" mode="aspectFill"></image></view></scroll-view></view></view><view class="theme"><common-title><template #name>专题精选</template><template #custom><navigator url="">More+</navigator></template></common-title><view class="content"><theme-item v-for="item in 8"></theme-item><theme-item :isMore="true"></theme-item></view></view></view>
</template><script setup>import {ref} from 'vue';import {apiGetBanner,apiGetDayRandom} from "@/api/apis.js"const bannerList = ref([]);const randomList = ref([])const noticeList = ref([])const getBanner = async () => {let res = await apiGetBanner()bannerList.value = res.data.data};const getDayRandom = async () => {let res = await apiGetDayRandom()randomList.value = res.data.data};const getNotice = async () => {let res = await uni.request({url: "https://tea.qingnian8.com/api/bizhi/wallNewsList",header: {'access-key': "guagua"},data: {select: true}})if (res.data.errCode === 0) {noticeList.value = res.data.data}}// 点击跳转到壁纸预览页面const goPreview = () => {uni.navigateTo({url: '/pages/preview/preview'});};getBanner()getDayRandom()getNotice()
</script><style lang="scss">.homeLayout {.banner {width: 750rpx;padding: 30rpx 0;swiper {width: 100%;height: 340rpx;&-item {width: 100%;height: 100%;padding: 0 30rpx;image {width: 100%;height: 100%;border-radius: 10rpx;}}}}.notice {margin: 0 30rpx;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;background: gray;border-radius: 80rpx;height: 80rpx;line-height: 80rpx;.left {width: 140rpx;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;:deep() {.uni-icons {color: $brand-theme-color !important;}}.text {color: $brand-theme-color;font-weight: 600;font-size: 28rpx;}}.center {flex: 1;height: 100%;swiper {height: 100%;&-item {// 以下三条是实现 文字长度超过显示宽度时展示省略号 的关键操作overflow: hidden;white-space: nowrap;text-overflow: ellipsis;// 以上三条height: 100%;color: $text-font-color-3;font-size: 30rpx;// flex布局与 text-overflow: ellipsis;属性 冲突// display: flex;// flex-direction: row;// flex-wrap: nowrap;// align-content: center;// align-items: center;// justify-content: flex-start;align-content: end;align-items: end;}}}.right {width: 70rpx;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;align-items: center;justify-content: center;}}.select {padding: 50rpx 30rpx 0 30rpx;scroll-view {white-space: nowrap;.box {display: inline-block;width: 200rpx;height: 430rpx;margin-right: 15rpx;image {height: 100%;width: 100%;}}:last-child {margin-right: 0;border-radius: 10rpx;}}.date {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;color: $brand-theme-color;:deep() {.uni-icons {color: $brand-theme-color !important;}}}}.theme {padding: 50rpx 30rpx;.content {display: grid;gap: 15rpx;grid-template-columns: repeat(3, 1fr);}}}
</style>