小程序-你不得不知的Promise封装请求

放在开头

这是一个小程序的轮播图，但是为我们在请求api数据时，将请求wx.request代码封装调用

效果展示

代码篇

页面wxml

这里需要注意的是我们设置swiper和image标签时，有默认属性值， widthFix 让图片的标签宽高 和图片标签的内容的宽高都等比例的发生变化

<view class="index_swiper">
    <swiper circular autoplay indicator-dots>
        <swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
            <navigator url="/pages/category/category" open-type="switchTab">
                <image src="{{item.image_src}}" mode="widthFix"></image>
            </navigator>
        </swiper-item>
    </swiper>
</view>

页面wxss

.index_swiper swiper {
     750rpx;
    height: 340rpx;
}
.index_swiper swiper image {
     100%;
}

页面js

设置初始数据，设置类型为数组，用封装的函数来代替请求数据，下面request为新命名的函数名

import {request} from "请求js所在的文件相对位置"
Page({
    data: {
        swiperList: [],
    },
    onLoad: function(options) {
        this.getSwiperList();
    },
    getSwiperList() {
        request({
                url: "/home/swiperdata"
            })
            .then(result => {
                this.setData({
                    // swiperList: result.data.message
                    swiperList: result
                })
            })
    }
    //## 放在开头

这是一个小程序的轮播图，但是为我们在请求api数据时，将请求wx.request代码封装调用

效果展示

代码篇

页面wxml

这里需要注意的是我们设置swiper和image标签时，有默认属性值， widthFix 让图片的标签宽高 和图片标签的内容的宽高都等比例的发生变化

<view class="index_swiper">
    <swiper circular autoplay indicator-dots>
        <swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
            <navigator url="/pages/category/category" open-type="switchTab">
                <image src="{{item.image_src}}" mode="widthFix"></image>
            </navigator>
        </swiper-item>
    </swiper>
</view>

页面wxss

.index_swiper swiper {
     750rpx;
    height: 340rpx;
}
.index_swiper swiper image {
     100%;
}

页面js

设置初始数据，设置类型为数组，用封装的函数来代替请求数据，下面request为新命名的函数名。异步请求和同步请求的差异在于我们可否执行后续代码，同步会堵塞之后的代码

import {request} from "请求js所在的文件相对位置"
Page({
    data: {
        swiperList: [],
    },
    onLoad: function(options) {
        this.getSwiperList();
    },
    //异步请求
    getSwiperList() {
        request({
                url: "/home/swiperdata"
            })
            .then(result => {
                this.setData({
                    // swiperList: result.data.message
                    swiperList: result
                })
            })
    }
    //一般进行数据请求就是要使用异步请求，一些需求可以写在回调里面。如果一定要同步使用数据的话，可以使用 async+await
    // async  getSwiperList()  {
    //     const res = await request({ url: "/home/swiperdata", data: this.QueryParams });
    //     console.log(res);
    //             this.setData({
    //                 // swiperList: result.data.message
    //                 swiperList: res
    //             })
    // },
})

封装的请求

// 最简单的封装好的微信请求的代码
export const request = (params) => {
    // 定义公共的URL
    const baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1";
    return new Promise((resolve, reject) => {
        wx.request({
            ...params,
            url: baseUrl + params.url,
            success: (result) => {
                // resolve(result)
                resolve(result.data.message)

            },
            fail: (err) => {
                reject(err)
            }
        })
    })
}

    // async  getSwiperList()  {
    //     const res = await request({ url: "/home/swiperdata", data: this.QueryParams });
    //     console.log(res);
    //             this.setData({
    //                 // swiperList: result.data.message
    //                 swiperList: res
    //             })
    // },
})

封装的请求

// 最简单的封装好的微信请求的代码
export const request = (params) => {
    // 定义公共的URL
    const baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1";
    return new Promise((resolve, reject) => {
        wx.request({
            ...params,
            url: baseUrl + params.url,
            success: (result) => {
                // resolve(result)
                resolve(result.data.message)

            },
            fail: (err) => {
                reject(err)
            }
        })
    })
}