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>
相关推荐
teeeeeeemo4 分钟前
http和https的区别
开发语言·网络·笔记·网络协议·http·https
ObjectX前端实验室7 分钟前
三年写了很多代码,也想写写自己
前端·程序员
wuxuanok11 分钟前
Web后端开发-Mybatis
java·开发语言·笔记·学习·mybatis
满分观察网友z12 分钟前
uniapp的navigator跳转功能
前端
江城开朗的豌豆16 分钟前
Vue组件DIY指南:手把手教你玩转自定义组件
前端·javascript·vue.js
无奈何杨20 分钟前
CoolGuard风控节假日完善,QLExpress自定义函数
前端·后端
CSR-kkk41 分钟前
前端工程化速通——①ES6
前端·es6·速通
yt948321 小时前
C#实现CAN通讯接口
java·linux·前端
前端小巷子1 小时前
Cookie与Session:Web开发中的身份验证与数据存储
前端·javascript·面试