zoukankan      html  css  js  c++  java
  • 小程序-你不得不知的Promise封装请求

    放在开头

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

    效果展示

    thisisimage

    代码篇

    页面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代码封装调用

    效果展示

    thisisimage

    代码篇

    页面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)
                }
            })
        })
    }
  • 相关阅读:
    初识python: 文件下载进度
    初识python 之 爬虫:使用正则表达式爬取“糗事百科
    初识python 之 爬虫:使用正则表达式爬取“古诗文”网页数据
    初识python 之 爬虫:正则表达式
    初识python 之 爬虫:爬取双色球中奖号码信息
    初识python 之 爬虫:BeautifulSoup 的 find、find_all、select 方法
    初识python 之 爬虫:爬取中国天气网数据
    初识python 之 爬虫:爬取豆瓣电影最热评论
    初识python 之 爬虫:爬取某电影网站信息
    初识python 之 爬虫:爬取某网站的壁纸图片
  • 原文地址:https://www.cnblogs.com/dongxuelove/p/13048246.html
Copyright © 2011-2022 走看看