uni-app 之 获取网络列表数据

image.png

<template>
    <!-- vue2的<template>里必须要有一个盒子，不能有两个，这里的盒子就是 view-->
    <view>

        --- uni.request 网络请求API接口 ---
        <view v-for="(item) in caturl" :key="item.id">
            <!-- 免费的测试接口 -->
            <image :src="item.url" mode="aspectFill"></image>

            <view>{{item.id}}</view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {

                caturl: [],

            }
        },
        methods: {
            getpicurl() {
                uni.showLoading({
                    title: "加载中" // 加个进度条
                })

                uni.request({
                    url: "https://api.thecatapi.com/v1/images/search?limit=2",
                    // timeout:"6000",
                    success: res => {
                        console.log(res) // log打印获取的数据
                        this.caturl = res.data
                        // this.catid = res.data.id
                        // uni.hideLoading() // 图片加载出来后，关闭进度条
                    },
                    // fail:err=>{

                    // },
                    complete: () => {
                        // 接口调用结束的回调函数（调用成功、失败都会执行） 接口调用结束的回调函数（调用成功、失败都会执行）    
                        uni.hideLoading() // 无论图片能否加载出来，超时后都关闭进度条
                    },
                    
                })
            },

        },
        onLoad() {
            
            this.getpicurl()

        }
    }
</script>

<style lang="scss">
</style>