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

这篇具有很好参考价值的文章主要介绍了uni-app 之 uni.request 网络请求API接口。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

uni-app 之 uni.request 网络请求API接口,uni-app,前端,javascript,开发语言

image.png文章来源地址https://www.toymoban.com/news/detail-706123.html

<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>

到了这里，关于uni-app 之 uni.request 网络请求API接口的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！