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

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

image.png

复制代码
<template>
    <!-- vue2的<template>里必须要有一个盒子,不能有两个,这里的盒子就是 view-->
    <view>
        
        --- uni.request 网络请求API接口 ---
        <view>
            <!-- 免费的测试接口 -->
            <!-- https://dog.ceo/api/breeds/image/random -->
            <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>
相关推荐
编程岁月3 分钟前
java面试-0203-java集合并发修改异常、快速/安全失败原理、解决方法?
java·开发语言·面试
qyresearch_10 分钟前
射频前端MMIC:5G时代的技术引擎与市场机遇
前端·5g
天蓝色的鱼鱼14 分钟前
Next.js 渲染模式全解析:如何正确选择客户端与服务端渲染
前端·react.js·next.js
CoderCodingNo18 分钟前
【GESP】C++五级考试大纲知识点梳理, (3-4) 链表-双向循环链表
开发语言·c++·链表
一枚前端小能手21 分钟前
🚀 巨型列表渲染卡顿?这几个优化技巧让你的页面丝滑如德芙
前端·javascript
酷柚易汛智推官21 分钟前
Electron技术深度解析:跨平台桌面开发的利器与挑战
前端·javascript·electron
llz_11226 分钟前
第五周作业(JavaScript)
开发语言·前端·javascript
yannick_liu37 分钟前
nuxt4 + nuxt-swiper实现官网全屏播放
前端
苏打水com40 分钟前
JS基础事件处理与CSS常用属性全解析(附实战示例)
前端
W.Y.B.G42 分钟前
JavaScript 计算闰年方法
开发语言·前端·javascript