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

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

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

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

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

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

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

 

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

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

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

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

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

app.js 代码如下

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

 

http.js代码如下

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

 在.vue页面中使用

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

查看数据请求 的信息

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

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

 

 POST请求

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

 

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

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

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

上一篇:Uniapp 视频播放器运行到微信小程序后黑屏解决


下一篇:uniapp - 底部标签式导航