uni-app 之 uni.request 网络请求API接口

逃离我推掉我的手 2023-10-15 18:43 34阅读 0赞

![format_png][]

image.png

<template>
        
        <view>
            
            --- uni.request 网络请求API接口 ---
            <view>
                
                
                <image :src="picurl" mode="aspectFill" @click="getpicurl"></image>
            </view>
            --- @click加个点击事件，因为接口是随机获取图片，所以每点一下就随机刷新个图片 ---
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
    
                    picurl: ""
    
                }
            },
            methods: {
                getpicurl() {
                    uni.showLoading({
                        title: "加载中" // 加个进度条
                    })
    
                    uni.request({
                        url: "https://dog.ceo/api/breeds/image/random",
                        success: res => {
                            console.log(res) // log打印获取的数据
                            this.picurl = res.data.message
                            uni.hideLoading() // 图片加载出来后，关闭进度条
                        }
                    })
                }
    
            },
            onLoad() {
                // uni.request({
                //  url: "https://dog.ceo/api/breeds/image/random",
                //  success: res => {
                //      console.log(res) // log打印获取的数据
                //      this.picurl = res.data.message
                //  }
                // })
                this.getpicurl()
            }
        }
    </script>
    
    <style lang="scss">
    </style>

[format_png]: https://img-blog.csdnimg.cn/img_convert/d9cd83f22f2d4efa3a7c9b62df9a7e94.webp?x-oss-process=image/format,png