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

电玩女神 2023-10-15 18:43 5阅读 0赞

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

![format_png][]

image.png

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

[format_png]: https://img-blog.csdnimg.cn/img_convert/49c0b3f452f8b4a6a9df8af0cfff3d41.webp?x-oss-process=image/format,png