Apikit接口连接uniapp测试

最新推荐文章于 2024-05-22 16:47:58 发布

原创最新推荐文章于 2024-05-22 16:47:58 发布

· 171 阅读

0 ·

版权

文章标签：

#uni-app

ApiKit是一个集API管理、Mock、自动化测试和异常监控于一身的工具，能解决多工具间的数据同步问题。在uniapp中调用API，首先在ApiKit创建接口，设置好HTTP路径和名称，然后在uniapp的onLoad周期内通过uni.request方法调用接口，获取并赋值给数据列表，最后在模板中遍历显示数据，实现类似轮播图的效果。

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

ApiKit 的定位是 API 管理 + Mock + 自动化测试 + 异常监控 + 团队协作。可以通过一种工具解决之前使用多种工具的数据同步问题。高效、及时、准确！

下载地址：

Eolink - 一体化API在线管理平台_API接口管理_接口自动化测试Eolink致力于打造一站式、智能化的API全生命周期解决方案，为企业用户提供完善的API接口管理、API规范化治理、API研发流程优化、API性能和安全保障、API数据服务开放及交易等创新服务。https://www.eolink.com/?utm_source=cp&utm_content=cpy16

在uniapp测试中，会调用很多接口，如何把接口调用到uniapp中呢

1.创建api接口

（1）在进入到Apikit中后，点击添加项目→输入项目名称→添加ApI

（2）在http协议下写好路径（自定义）和API名称

（3）将用的数据写道返回成功结果中

这样就写好一个接口啦

2.调用

（1）将写好的API的地址复制

我们可以在浏览器中直接查看

（2）在uniapp中onload周期中

onLoad() {
			var _this = this;
			uni.request({	
			url:"https://mockapi.eolink.com/M5Fgfpz161b50819ded5b20853809198701bf2b06ebf661/prod-api/api/takeout/rotation/list?responseId=1145153",
				method:'GET',
				success:function(res){
					_this.list = res.data.rows;
					console.log(_this.list)
				}
			})
		}

（3）这样就拿到的API的数据，并且赋值给了list数组中

（4）调用

<template>
	<view class="content">
		<swiper :indicator-dots="true"  
		        :autoplay="true"       
				:interval="2000"  
			    indicator-color="rgba(0, 0, 0, 0.3)"
				indicator-active-color="#000000"
				:duration="1000"
				circular>      
			<swiper-item class="swiper-item" v-for="(item,index) in list" :key="item.id">
				<view class="swiper-item">
					<image :src="item.advImg"></image>
					<text>{{item.servModule}}</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

效果和下面的轮播图效果相同https://blog.youkuaiyun.com/m0_75047254/article/details/131604433?spm=1001.2014.3001.5501https://blog.youkuaiyun.com/m0_75047254/article/details/131604433?spm=1001.2014.3001.5501