uni-app的渲染数据和三种调接口的方法

渲染数据代码示例:

<template><view class="content"><view class="page-section indexListBox"><view class="indexList" v-for="(item , index) in homePosts" :key="index"><view class="title">{{item.title}}</view><view v-html="item.content"></view></view></view></view>
</template>
<style>.indexList uni-image {width: 100%;height: 130px;background: #eaeaea;}.indexList {margin-top: 15px;margin-bottom: 15px;}.indexList .title {background: #000;color: #fff;font-size: 16px;line-height: 37px;padding: 0 10px;margin-top: -5px;}.indexListBox{margin-top: 20px;}
</style>
<script>export default {data() {return {homePosts:[],}},onLoad() {//教程 uni-app:渲染app的首页文章数据第一步:将该方法加入onLoad中，使页面一加载的时候就获取文章列表this.getHomePosts();},methods:{getHomePosts(){var _self = this;uni.request({url: 'http://192.168.1.156:10086/smart-admin-api/article/page/list',//接口地址header: {'content-type': 'application/x-www-form-urlencoded',  //自定义请求头信息},success: (res) => {// 请求成功之后将文章列表数据赋值给homePosts_self.homePosts=res.data.data.list;//根据API数据找到对应的集合}});}}}
</script>

uni-app中调取接口的三种方式：

1、最普通的调取接口方法，不能解决异步

uni.request({url:'',data:'',method:'',   //get、post、deleteheader:{},success:res=>{},fail:()=>{},complete:=>{}})

2、利用ES6的Promise对象解决异步问题的方法

uni.request({url:'',data:'',method:'',   //get、post、deleteheader:{}}).then((result)=>{result将返回一个数组[error,{NativeData}]})

NativeData:调取接口后返回的原生数据。

uni.request({
url:'/api/getIndexCarousel.jsp',
}).then(result=>{
let [err,res]=result;
if(res.stat0usCode===200){this.carouselData=res.data;
};
if(res.statusCode===404){console.log("请求的接口没有找到");
}
})

（1）对数组的解构：var arr=[10,20,30];var [a,b,c]=arr; //对数组arr进行结构，并将数据给了abc三个变量（2）对对象的解构：var obj={a:10,b:20,c:30};var w={...obj}

3、async/await ES6的终极解决异步问题的办法

async：用在函数定义的前面。  async request(){ //函数体; }await：用在标明了async关键字的函数内部 异步操作的前面。

   methods: {async request(){let result=await uni.request({url:'/api/getIndexCarousel.jsp',})let [err,res]=result;if(res.statusCode===200){this.carouselData=res.data}}},onLoad(){this.request();}

uni-app的渲染数据和三种调接口的方法相关推荐

vue三种调用接口的方法
注:此博客仅用于学习,自己还处于菜鸟阶段,希望给相同处境的人提供一个可参考的博客.如果您觉得不合理,您的指导,非常欢迎,但请不要否定别人的努力,谢谢您了! vue三种调用接口的方法 1. this.$ ...
layui根据条件显示列_templet渲染layui表格数据的三种方式
layui前端框架是我一直在使用,也很好用. 今天记录一下,templet渲染layui表格数据的三种方式. 第一种:直接渲染(对于表格数据样式要求不高) 直接在动态表格字段声明,添加templet属 ...
layui 表格内容写temple函数_templet渲染layui表格数据的三种方式
layui前端框架是我一直在使用,也很好用. 今天记录一下,templet渲染layui表格数据的三种方式. 第一种:直接渲染(对于表格数据样式要求不高) 直接在动态表格字段声明,添加templet属 ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
Android 免root 备份数据,教你安卓手机免Root恢复手机数据的三种方法
说到安卓手机,人们对它的第一印象就是开源.自由.可定制.市面上大多数系统,比如Flyme.MIUI其实都是由安卓内核再加上一层自己的包装罢了.所以你会看到手机上一堆预装软件卸载不掉,这本质上就是手机厂 ...
用旭日图展示数据的三种方法
什么是旭日图? 旭日图(Sunburst Chart)是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况.旭日图中,离远点越近表示级别越高,相邻两层中 ...
【SSR服务端渲染+CSR客户端渲染+post请求+get请求+总结】三种开启服务器的方法总结
SSR服务端渲染 get请求方式 get.html文件 <form action="http://10.9.46.253:4002" target="_self&q ...
Android音乐播放器的获取数据的三种途径
安卓简易播放器获取数据的三种途径: 1.应用自带数据 2.手机内存卡 3.网络数据那我们来看看第一种途径: 一.应用自带数据 1.首先要创建一个播放应用类MediaPlayer有一个create的方 ...
discard connection丢失数据_python kafka 生产者发送数据的三种方式
python kafka 生产者发送数据的三种方式发送方式同步发送发送数据耗时最长有发送数据的状态,不会丢失数据,数据可靠性高以同步的方式发送消息时,一条一条的发送,对每条消息返回的结果判断 ...

uni-app的渲染数据和三种调接口的方法

uni-app的渲染数据和三种调接口的方法相关推荐

最新文章

热门文章