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>
相关推荐
hzzzzzo019 分钟前
微服务网关全解析:从入门到实践
java·开发语言·微服务
slandarer30 分钟前
MATLAB | 这是屎吗?抱歉打错了,这是什么?
开发语言·matlab
We....32 分钟前
Java多线程分块下载文件
java·开发语言
慢半拍iii42 分钟前
JAVA Web —— A / 网页开发基础
前端
Pluchon1 小时前
硅基计划3.0 Map类&Set类
java·开发语言·数据结构·算法·哈希算法·散列表
gnip1 小时前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty1 小时前
基于hiprint的票据定位打印系统开发实践
javascript
42fourtytoo1 小时前
天津大学智算2026预推免机试第二批题目及代码c++
开发语言·c++·面试
七夜zippoe1 小时前
缓存三大劫攻防战:穿透、击穿、雪崩的Java实战防御体系(一)
java·开发语言·缓存
almighty272 小时前
C#WPF控制USB摄像头参数:曝光、白平衡等高级设置完全指南
开发语言·c#·wpf·usb相机·参数设置