Uni-APP中还不会调用使用自定义的接口么？

前端开发三剑客中，算的上难一点是当属js，其中逻辑和用法相对于html和css真的需要下一番功夫才能很好的理解，下面我用一个案例来拆解出来如何调用和使用接口，并能在页面中纵享丝滑的展示出来。

一、使用接口的好处

1、制定标准

这里主要面对团队开发时，一个封装好的接口，在其封装前已经完成初步的接口使用标准，接口文档中会给出对应的接口地址、请求方式、参数、Url 、数据格式等等一系列内容，前端开发工程师在看到文档时，就能工知道如何调用使用这些接口。

2、方便修改

如果后期数据有变化，只需要更改接口里面的内容即可，修改对应数据库里面的数据，无需更改前端样式及属性文件，这点在后期维护上节省更多成本。

3、加载速度

我们在前端开发中使用绝对路径，比如图片、视频，那么会增加服务器的成本，占用更多的存储空间，但如果使用接口调用，就可以在一定程度上增加页面加载速度，当然这里面还有服务器配置大小、页面渲染样式多少共同决定。

4、安全性

如果使用爬虫程序，放在服务器中直接引用的数据更容易被爬取到，容易被攻击和盗用数据。

二、调用接口

假设已经有一个封装好接口，现在只需要如何调用。具体步骤如下：

1、首先自定义函数名，在前端<script>中的自定义函数下面命名一个getpics的函数名。

<script>
    methods:{
        getpics(){
        }
    }
</script>

2、调用接口文件，输入链接地址，并打印测试是否成功

<script>
    methods: {
        async getpics(){
		    const res = await this.$myRequest({
				url:'/api/getimgcategory'
			})
			console.log(res)
			}
		}
</script>

3、如果前台成功显示出数据，那么就可以设置接口的加载时间和数据调用，返回值

<script>
	export default {
		data() {
			return {
				cates:[]
			}
		},
		methods: {
			async getpics(){
				const res = await this.$myRequest({
					url:'/api/getimgcategory'
				})
				console.log(res)
				this.cates = res.data.message
			}
		},
		onLoad() {
			this.getpics()
		}
	}
</script>

三、前端显示

设置for循环，让参数item循环cates[]数组里面的数据，:key值为接口里面对应的id

<view v-for="(item,index) in cates" :key='item.id'>{{item.title}}</view>