uni-request请求页面渲染_uni.request获得数据后如何循环渲染-CSDN博客

本文介绍如何在uni-app中使用uni.request从服务器获取JSON数据，并将其渲染到前端界面。通过创建组件页面，设置请求方法，处理响应数据，以及在页面中展示数据，实现了数据的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端最主要的还是将数据从后端请求过来，对数据进行处理，并且渲染在界面，
前面讲到了uni-app请求接口跨域问题https://www.jianshu.com/p/aea58ee405b8，自己写完json就放在了自己的服务器上了，日常就是对自己写的json的一些请求玩耍~

今天主要写一下关于uni.request请求相关操作
文档：https://uniapp.dcloud.io/api/request/request

首先准备服务器接口数据：http://www.intmote.com/test.json
目的是把这些数据拿过来渲染在前端界面上

具体步骤
1：首先要写一个空白的组件页面

<template>
    <view>     
        空白页面请求数据示例
    </view>
</template>
<script>
    export default {
        data() {
            return {}
               },
        onLoad() {},
        methods: {}
    }
</script>
<style>
</style>

2：看文档，写请求方法
https://uniapp.dcloud.io/api/request/request
使用示例代码，复制黏贴过来
在这里插入图片描述
将代码写在getList()函数里面，并且把函数写在methods的方法里面
这里需要将 url:“https://www.example.com/request”，改成 url： “/api/test.json”, （前面已经设置了跨域的代理了）

 methods: {  
            getList() {
            uni.request({
              url: '/api/test.json', 
                success: (res) => {
                    console.log(res.data);
                    this.text = 'request success';
                }
            });
            }
        }

3:载入页面的时候加载调用请求函数请求api

 onLoad() {
             this.getList();
},

4:成功调用，在控制台打印 console.log(res.data);
在这里插入图片描述
5：在data里面写一个空数组itemList: [ ]，接收api里面返回的数据

data() {
            return {  
                 itemList: []
            }
        },

6：api请求成功之后，将请求过来的数据赋值给上一步在data(）定义的数组itemList 里面

 success: (res) => {
                        console.log(res.data);
                         this.itemList =res.data.first;
                    }

7：赋值完成之后,需要对数据进行循环处理，渲染在view标签里面

<view class="uni-padding-wrap uni-common-mt" v-for="item in itemList">
             <span>{{item.name}}</span>
             <span>{{item.nick}}</span>
        </view>

ok,完成了，效果如下在这里插入图片描述
参考代码

<template>
    <view>     
        <view class="uni-padding-wrap uni-common-mt" v-for="item in itemList">
             <span>{{item.name}}</span>
             <span>{{item.nick}}</span>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {  
                 itemList: []
            }
        },
        onLoad() {
                   this.getList();
               },
        methods: {
             getList() {
                uni.request({
                    url: '/api/test.json', 
                    success: (res) => {
                        console.log(res.data);
                         this.itemList =res.data.first;
                    }
                });
            }
        }
    }
</script>
<style>
.img {
    width: 500upx;
    height: 500upx;
    margin: 0 95upx;
}
</style>

作者：祈澈菇凉
链接：https://www.jianshu.com/p/d10340e76df3
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。