在项目的根目录下,创建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的更多相关文章

  1. App 组件化/模块化之路——如何封装网络请求框架

    App 组件化/模块化之路——如何封装网络请求框架 在 App 开发中网络请求是每个开发者必备的开发库,也出现了许多优秀开源的网络请求库.例如 okhttp retrofit android-asyn ...

  2. 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

    § 封装网络请求及 mock 数据 本文配套视频地址: https://v.qq.com/x/page/i05544fogcm.html 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发 ...

  3. 09事件传递参数-封装网络请求api get和post合并整合在一起

    1==>通过点击事件进行传递参数 <view bindtap="goEdution" data-index="5">西南大学</view ...

  4. [iOS微博项目 - 3.3] - 封装网络请求

    github: https://github.com/hellovoidworld/HVWWeibo   A.封装网络请求 1.需求 为了避免代码冗余和对于AFN框架的多处使用导致耦合性太强,所以把网 ...

  5. 转-封装网络请求库,统一处理通用异常 (基于volley网络请求库)

    http://blog.csdn.net/kroclin/article/details/40540761 一.前言 volley的发布让网络请求也变得十分便利,但是我们通常懒得很想用一两句代码实现一 ...

  6. andriod开发,简单的封装网络请求并监听返回.

    一.为什么封装 因为android 4.0 以后的发送网络请求必须要放到异步线程中,而异步线程必须跟handle合作才能更新主线程中的UI,所以建议用一个类继承handler来异步处理网络请求. 二. ...

  7. 第六十二篇、AFN3.0封装网络请求框架,支持缓存

    1.网络请求 第一种实现方式: 功能:GET POST 请求 缓存逻辑: 1.是否要刷新本地缓存,不需要就直接发起无缓存的网络请求,否则直接读取本地数据 2.需要刷新本地缓存,先读取本地数据,有就返回 ...

  8. IOS 京东相关app 出现“网络请求失败,请检查您的网络设置”的解决办法

    问题情况 在IOS系统下,下载安装或者更新新版的京东相关app之后,打开app直接就是“网络请求失败,请检查网络设置”,无论是数据连接还是wifi都试了,都是网络请求失败. 然而打开无线局域网-使用无 ...

  9. 分析移动端APP的网络请求抓包

    为了方便,本文以 iOS 系统来进行演示. 使用代理 移动操作系统中都有可以设定系统代理的设置,比如在 iOS 中可以通过 Settings->WLAN 看到很多 Networks,通过点击它们 ...

  10. ios中封装网络请求类

    #import "JSNetWork.h" //asiHttpRequest #import "ASIFormDataRequest.h" //xml 的解析 ...

随机推荐

  1. SQL注入手工注入portswigger labs练习

    目录 1 什么是SQL注入 2 QL注入会发生在哪些地方 3 QL注入的类型有哪些 4 QL注入点如何探测 5 QL注入的一般步骤 6 QL注入的防御 7 SQL注入前需要了解的 8 场训练 port ...

  2. ElementUI ---- dialog点击取消后蒙遮层不消失

    场景: 页面A打开了 dialog, 然后点击 页面A dialog 的按钮 跳转到 页面B,并且打开页面B的 dialog 但是页面B的 dialog 关闭后,蒙遮层并没消失(已经设置了 :appe ...

  3. python通过实例方法名字的字符串调用方法

    目录 方式1 - 反射 hasattr 方法 判断当前实例中是否有着字符串能映射到的属性或者方法, 一般会在 getattr 之前作为判断防止报错 getattr 方法 获取到当前实例中传入字符串映射 ...

  4. commons.dbutils1.2介绍及使用

    一.结构介绍 高层结构图: wrappers包: handlers包(部分): 二.功能介绍 commons.dbutils是一个对JDBC操作进行封装的类集,其有如下几个优点: (1)没有可能的资源 ...

  5. Redis为什么这么快之IO多路复用

    情景复现 面试官:Redis为什么这么快? 我:1. 基于内存 2. 高效数据结构 3. 单线程 4. IO多路复用 面试官:那你讲讲Redis的IO多路复用模型是什么. 我:哦,嗯,啊,呀...IO ...

  6. Premiere剪辑加速

    使用AE或者Premire的时候,如果需要导出文件,有的文件还是挺大的,处理起来疯狂占用CPU,经常导致别的工作无法进行. 如果能够使用GPU进行压缩工作就好了,如果你用一块独立显卡,那么就可以正常使 ...

  7. 强化学习:使用自动控制方法PID来解决强化学习问题中的cartpole问题(小车平衡杆问题)

    网上找到的一个实现: 地址: https://gist.github.com/HenryJia/23db12d61546054aa43f8dc587d9dc2c 稍微修改后的代码: import nu ...

  8. 【报错解决】【Linux】Name or service not known

    # 配置文件位置 /etc/sysconfig/network-scripts/ # nano ifcfg-eth0查看网卡配置,确认dns已配置,且网关已配置 在虚拟机中添加临时路由网关(要与物理主 ...

  9. 【pygame】Python小游戏开发之看代码学编程

    话说我学习的时候,英文文档难以理解,中文文档杂乱无章,最终还是觉得,还不如直接看代码学习. 下面是我学习过程中写的代码,注释写的很详细,我想会帮助你理解的 pip install pygame 1.游 ...

  10. Netty内存池泄漏问题

    为了提升消息接收和发送性能,Netty针对ByteBuf的申请和释放采用池化技术,通过PooledByteBufAllocator可以创建基于内存池分配的ByteBuf对象,这样就避免了每次消息读写都 ...