uniapp 请求封装

<meta charset="utf-8">

最近使用了uniapp开发了几个项目,参考了网上的一些案例根据自己的项目需求对网络请求做了封装,顺便记下方便以后使用。

首先新建一个utils文件夹,用于放置请求文件,在文件夹中新建两个文件http.js、api.js,http.js用于封装请求和拦截,api.js用于封装具体的接口。

![<meta charset="utf-8">

最近使用了uniapp开发了几个项目,参考了网上的一些案例根据自己的项目需求对网络请求做了封装,顺便记下方便以后使用。

首先新建一个utils文件夹,用于放置请求文件,在文件夹中新建两个文件http.js、api.js,http.js用于封装请求和拦截,api.js用于封装具体的接口。

image

接下来就是http.js里对请求的封装:

image

这是基本的接口请求,后面还有上次图片uploadFile的接口请求封装。另外这里的baseUrl = '/api'是h5因为需要跨域做了反向代理,app和小程序只需要将‘/api’替换为请求接口的域名。h5需要在配置文件manifest.js进行配置,点击源码试图在h5可进行配置,配置如下devServer:

image

下面是上传图片的接口请求:

image

最后记得将他们export出去:

image

接下来就是api.js封装接口了:

image

最后就是使用方法了:这种方法可以在页面需要请求时引入,但是这样太烦了尤其是请求很多的时候,所以我在将api.js全局挂载到main.js

image

使用就很简单了:

image

作者:xxxxxxxikaI
链接:https://www.jianshu.com/p/c9aab12e3bbf
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
](//upload-images.jianshu.io/upload_images/19122856-d83d3be305fa93be.png?imageMogr2/auto-orient/strip|imageView2/2/w/169/format/webp)

接下来就是http.js里对请求的封装:

image

这是基本的接口请求,后面还有上次图片uploadFile的接口请求封装。另外这里的baseUrl = '/api'是h5因为需要跨域做了反向代理,app和小程序只需要将‘/api’替换为请求接口的域名。h5需要在配置文件manifest.js进行配置,点击源码试图在h5可进行配置,配置如下devServer:

image

下面是上传图片的接口请求:

image

最后记得将他们export出去:

image

接下来就是api.js封装接口了:

image

最后就是使用方法了:这种方法可以在页面需要请求时引入,但是这样太烦了尤其是请求很多的时候,所以我在将api.js全局挂载到main.js

image

使用就很简单了:

image

作者:xxxxxxxikaI
链接:https://www.jianshu.com/p/c9aab12e3bbf
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容