uni-app里面使用uni.request请求并且渲染列表

1:新建一个uniapp项目,命名为test。
2:官方网站找文档,要用到列表组件

地址导航:https://ext.dcloud.net.cn/plugin?id=24
导入到自己的test项目里面去

导入之后,可以看到目录结构如下


3:打开index,开始写代码

使用方式列表的方式,在 script 中引用组件并且在 template 中使用组件 。

import uniList from "@/components/uni-list/uni-list.vue"
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default {
    components: {uniList,uniListItem}
}

index代码写好了参考如下:






4:运行到浏览器

点击运行的菜单,运行到chrom浏览器里面。


运行成功,显示的界面效果,这个是静态的。


5:准备一个可以使用的接口

找了一个可以使用的接口,网上有很多免费的api接口,但是很多免费的接口都容易被攻击,很容易失效,在使用之前,请先点击去查看一下,接口是否是完整的。

接口地址:https://unidemo.dcloud.net.cn/api/news

6:开始写请求

这里是请求使用的一个方法uni.request(OBJECT):官方文档放在这里:https://uniapp.dcloud.io/api/request/request
官网的例子是这样的

示例

uni.request({
    url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

我们可以直接复制,放到自己的代码里面,并且把url修改成我上一步准备的接口数据。

index.vue代码如下





写完代码之后,打开我们的控制台,可以看到请求的免费的api里面的数据,是请求成功了 的,在请求成功的success方法里面,写一个console.log(res.data),将数据打印在控制台方便查看。

7:开始赋值,渲染到前端界面

这个时候的步骤就不多说了,大家都非常的清楚,在data()里面定义一个空数组,将请求到的res.data赋值给空数组,然后进到view里面进行遍历,渲染数据到页面。

参考代码;





效果就可以出来了


你可能感兴趣的:(uni-app里面使用uni.request请求并且渲染列表)