Uniapp 请求封装,uni.request(object)

最近准备要做一个小程序的项目,看了会原生小程序和uniapp,最后决定选择用uniapp来开发,其实很简单,uniapp是基于Vue的一个前端框架使用起来比较顺手,话多了,直接进入正题。

在查阅uniapp开发文档的时候,看到了uni.request()的官方示例

 看到这里,当时就直接在本地新建了一个test项目来测试

此处的接口地址是使用 Koa 搭的本地假数据,感兴趣的可以自己了解下

 果然使用起来是非常的简单,直接在页面中调用这个方法就可以拿到数据,确实很方便,可考虑到实际项目开发中需要调很多接口,如果都写在页面里,对于后期维护非常困难!

于是就想到了封装一个方法,对接口请求进行统一管理,便于后期维护

一、新建一个api文件夹,下方分别建立api.js 和 http.js 两个文件

 api.js是封装接口的JS   http.js是统一管理接口的文件

api.js 代码如下

 

 

http.js代码如下

 在.vue页面中使用

查看数据请求 的信息

GET请求,已经在请求地址后面拼接上我们传递的参数id值

 POST请求

总结来说,所有请求方法放在一个文件中,有利于后期的维护和管理。

因此封装还是很有必要的,当然,这个封装并不完善,还有很多东西在api.js中都没有配置,大家可根据实际开发进行相对应的设置。

如有错误的地方,劳请大家指正和轻喷(手动狗头)....

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值