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>
相关推荐
旺仔牛仔QQ糖几秒前
Vue3.0 Hook 使用好用多多
前端
whm2777几秒前
Visual Basic 文件系统控件
开发语言·visual studio
00后程序员张8 分钟前
Jenkins Pipeline post指令详解
java·开发语言
万粉变现经纪人13 分钟前
如何解决 pip install -r requirements.txt 子目录可编辑安装缺少 pyproject.toml 问题
开发语言·python·scrapy·beautifulsoup·scikit-learn·matplotlib·pip
第七序章13 分钟前
【C + +】红黑树:全面剖析与深度学习
c语言·开发语言·数据结构·c++·人工智能
夜晚中的人海17 分钟前
【C++】滑动窗口算法习题
开发语言·c++·算法
~无忧花开~18 分钟前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
kesteler20 分钟前
R-切割数据
开发语言·r语言
程序猿小D25 分钟前
【完整源码+数据集+部署教程】【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
前端·yolo·计算机视觉·目标跟踪·数据集·yolo11·价格标签检测系统源码
哞哞不熬夜26 分钟前
JavaEE--SpringIoC
java·开发语言·spring boot·spring·java-ee·maven