uni-app封装网络请求promise
在项目的根目录下,创建http文件夹。
然后在创建request.js文件
文件代码如下
export function apiapi(myurl,myget,mydata,tou="Accept: text/plain" ){
return new Promise((resolve,reject)=>{
uni.request({
url: myurl, //真实接口地址。
method:myget||"get",//请求的方式
data:mydata||{},//参数
header: {
'custom-header': tou//自定义请求头信息,这里也可以携带token
},
// 成功使用resolve
success: (res) => {
resolve(res)
},
//失败调用reject
fail:(err)=>{
reject(err)
}
});
})
}
我是使用的promise进行封装的。
对promise封装的注意点
要有返回值 return
resolve,是成功时直接调用。将要传递的参数放入进去resolve(res)
reject失败错误直接调用。将要传递的参数直接放进去reject(err)
注意
在一个模块中,可以同时使用export default 和export 向外暴露成员
使用export向外暴露的成员,使用{ }的形式来接收,这种形式,叫做【按需导出】
使用export导出的成员,必须严格按照导出时候的名称,来使用{ }按需接收
使用export导出的成员,如果想换个变量名称接收,可以使用as来起别名
import {title, content as content1} from './test.js'
在某一个页面使用
先引入;这里注意导入的apiapi应该和暴露出来的一致哈!
import {apiapi} from "../../http/request.js"
//监听页面加载(常用来发送请求)
onLoad(option){
apiapi("https://edu.51cto.com/center/seckill/index/get-seckill-data","GET", { page:1,size:1},).then(res=>{
console.log("zijide",res);
}).catch(err=>{
console.log(err);
})
},
按照上面这样封装,会出现一个问题就是。
每次使用的时候,都会引入。这样会很麻烦的。
因为我们几乎每一个页面都发是哪个请求
所以可以优化一下
将这个文件在main.js中引入。
然后挂载到Vue的原型上。
然后就可以直接使用了。因为原型的特点就是数据共享,节约空间
main.js
//因为是export暴露出来的,所以要使用{}来接受哈
import {apiapi} from "./http/request.js"
//直接挂载到原型上 通过this.$api直接调用
Vue.prototype.$api=apiapi;
在某个使用的页面
不需要再次引入了,因为挂载到原型上的
//监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参)
onLoad(option){
this.$api("https://edu.51cto.com/center/seckill/index/get-seckill-data","GET", { page:1,size:1},).then(res=>{
console.log("优化封装",res);
}).catch(err=>{
console.log(err);
})
},
我们在项目中,通常是将所有的请求放在同一个文件中。
这样方便我们管理
所以在 https文件夹中再新建一个文件,
命名为api.js
api.js文件
import {apiapi} from "./https.js"
export const aa= params=>apiapi('https://edu.51cto.com/center/seckill/index/get-seckill-data', 'get',params);
这一句等价于
// 如果只有一个参数,可以省略括号。params是参数。
// export const aa= params=> 说明是一个匿名函数
// 去掉大括号的时候,可以去掉retuen.
// const aa=function(params){
// return apiapi('https://edu.51cto.com/center/seckill/index/get-seckill-data', 'get',params)
// }
// export aa
main.js挂载到原型上
//引入进行接收
//listapi 身上有很多的方法,那个api.js所有的方法都在listapi上
import * as listapi from './http/api.js';
//挂载到原型上
Vue.prototype.$listapi=listapi;
使用页面
onLoad(option){
this.$listapi.aa( { page:1,size:1}).then(res=>{
console.log("再次封装11数据",res);
}).catch(err=>{
console.log(err);
})
},
这样使用起来是不是更加的简单了。
更加的方便了呢。
将所有的接口进行统一的管理。便于维护了
uni-app封装网络请求promise的更多相关文章
- App 组件化/模块化之路——如何封装网络请求框架
App 组件化/模块化之路——如何封装网络请求框架 在 App 开发中网络请求是每个开发者必备的开发库,也出现了许多优秀开源的网络请求库.例如 okhttp retrofit android-asyn ...
- 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据
§ 封装网络请求及 mock 数据 本文配套视频地址: https://v.qq.com/x/page/i05544fogcm.html 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发 ...
- 09事件传递参数-封装网络请求api get和post合并整合在一起
1==>通过点击事件进行传递参数 <view bindtap="goEdution" data-index="5">西南大学</view ...
- [iOS微博项目 - 3.3] - 封装网络请求
github: https://github.com/hellovoidworld/HVWWeibo A.封装网络请求 1.需求 为了避免代码冗余和对于AFN框架的多处使用导致耦合性太强,所以把网 ...
- 转-封装网络请求库,统一处理通用异常 (基于volley网络请求库)
http://blog.csdn.net/kroclin/article/details/40540761 一.前言 volley的发布让网络请求也变得十分便利,但是我们通常懒得很想用一两句代码实现一 ...
- andriod开发,简单的封装网络请求并监听返回.
一.为什么封装 因为android 4.0 以后的发送网络请求必须要放到异步线程中,而异步线程必须跟handle合作才能更新主线程中的UI,所以建议用一个类继承handler来异步处理网络请求. 二. ...
- 第六十二篇、AFN3.0封装网络请求框架,支持缓存
1.网络请求 第一种实现方式: 功能:GET POST 请求 缓存逻辑: 1.是否要刷新本地缓存,不需要就直接发起无缓存的网络请求,否则直接读取本地数据 2.需要刷新本地缓存,先读取本地数据,有就返回 ...
- IOS 京东相关app 出现“网络请求失败,请检查您的网络设置”的解决办法
问题情况 在IOS系统下,下载安装或者更新新版的京东相关app之后,打开app直接就是“网络请求失败,请检查网络设置”,无论是数据连接还是wifi都试了,都是网络请求失败. 然而打开无线局域网-使用无 ...
- 分析移动端APP的网络请求抓包
为了方便,本文以 iOS 系统来进行演示. 使用代理 移动操作系统中都有可以设定系统代理的设置,比如在 iOS 中可以通过 Settings->WLAN 看到很多 Networks,通过点击它们 ...
- ios中封装网络请求类
#import "JSNetWork.h" //asiHttpRequest #import "ASIFormDataRequest.h" //xml 的解析 ...
随机推荐
- SQL注入手工注入portswigger labs练习
目录 1 什么是SQL注入 2 QL注入会发生在哪些地方 3 QL注入的类型有哪些 4 QL注入点如何探测 5 QL注入的一般步骤 6 QL注入的防御 7 SQL注入前需要了解的 8 场训练 port ...
- ElementUI ---- dialog点击取消后蒙遮层不消失
场景: 页面A打开了 dialog, 然后点击 页面A dialog 的按钮 跳转到 页面B,并且打开页面B的 dialog 但是页面B的 dialog 关闭后,蒙遮层并没消失(已经设置了 :appe ...
- python通过实例方法名字的字符串调用方法
目录 方式1 - 反射 hasattr 方法 判断当前实例中是否有着字符串能映射到的属性或者方法, 一般会在 getattr 之前作为判断防止报错 getattr 方法 获取到当前实例中传入字符串映射 ...
- commons.dbutils1.2介绍及使用
一.结构介绍 高层结构图: wrappers包: handlers包(部分): 二.功能介绍 commons.dbutils是一个对JDBC操作进行封装的类集,其有如下几个优点: (1)没有可能的资源 ...
- Redis为什么这么快之IO多路复用
情景复现 面试官:Redis为什么这么快? 我:1. 基于内存 2. 高效数据结构 3. 单线程 4. IO多路复用 面试官:那你讲讲Redis的IO多路复用模型是什么. 我:哦,嗯,啊,呀...IO ...
- Premiere剪辑加速
使用AE或者Premire的时候,如果需要导出文件,有的文件还是挺大的,处理起来疯狂占用CPU,经常导致别的工作无法进行. 如果能够使用GPU进行压缩工作就好了,如果你用一块独立显卡,那么就可以正常使 ...
- 强化学习:使用自动控制方法PID来解决强化学习问题中的cartpole问题(小车平衡杆问题)
网上找到的一个实现: 地址: https://gist.github.com/HenryJia/23db12d61546054aa43f8dc587d9dc2c 稍微修改后的代码: import nu ...
- 【报错解决】【Linux】Name or service not known
# 配置文件位置 /etc/sysconfig/network-scripts/ # nano ifcfg-eth0查看网卡配置,确认dns已配置,且网关已配置 在虚拟机中添加临时路由网关(要与物理主 ...
- 【pygame】Python小游戏开发之看代码学编程
话说我学习的时候,英文文档难以理解,中文文档杂乱无章,最终还是觉得,还不如直接看代码学习. 下面是我学习过程中写的代码,注释写的很详细,我想会帮助你理解的 pip install pygame 1.游 ...
- Netty内存池泄漏问题
为了提升消息接收和发送性能,Netty针对ByteBuf的申请和释放采用池化技术,通过PooledByteBufAllocator可以创建基于内存池分配的ByteBuf对象,这样就避免了每次消息读写都 ...