微信小程序开发——使用promise封装异步请求
前言:
有在学vue的网友问如何封装网络请求,这里以正在写的小程序为例,做一个小程序的请求封装。
关于小程序发起 HTTPS 网络请求的Api,详情可以参考官方文档:wx.request(Object object)。
如果直接使用官方提供的个Api,那么每次在进行网络请求调用时,我们都要按官方文档上说的那样传递需要设置的请求参数,然后对不同的请求相应结果做不同的处理。但是前端同服务器端的接口请求中有大部分的请求参数以及响应结果处理都是很类似的,也就没有必要对所有请求代码都重新敲敲一遍,那么对原生的网络请求进行封装就有必要了。
网络请求封装:
如果接口比较多,可以创建两个文件,完成网络请求的封装:
1. http.js
/**
* 封装http 请求方法
*/
const apiUrl = "https://www.xxx.cn"; //服务器api地址
const http = (params) => {
//返回promise 对象
return new Promise((resolve, reject) => {
wx.request({
url: apiUrl + params.url,//服务器url+参数中携带的接口具体地址
data: params.data,//请求参数
header: params.header || {
"Content-Type": "application/x-www-form-urlencoded"//设置后端需要的常用的格式就好,特殊情况调用的时候单独设置
},
method: params.method || 'POST',//默认为GET,可以不写,如常用请求格式为POST,可以设置POST为默认请求方式
dataType: params.dataType,//返回的数据格式,默认为JSON,特殊格式可以在调用的时候传入参数
responseType: params.responseType,//响应的数据类型
success: function(res) {
//接口访问正常返回数据
if (res.statusCode == 200) {
//1. 操作成功返回数据,原则上只针对服务器端返回成功的状态(如本例中为000000)
if (res.data.retCode == "000000") {
resolve(res.data)
} else if(params.url == "/order/result" && res.data.retCode == "800020") {//支付结果未知
//需要特殊处理的接口,可以单独列出来返回数据
resolve(res.data)
} else {
wx.showToast({
icon: "none",
title: res.data.retMsg
})
console.log(res.data)
}
} else {
//2. 操作不成功返回数据,以toast方式弹出响应信息,如后端未格式化非操作成功异常信息,则可以统一定义异常提示
var errMsg = res.data.message
errorToast();
console.log(res.data)
}
},
fail: function(e) {
errorToast();
reject(e)
}
})
})
}
module.exports = {
http: http
}
注:上边代码中已经注释比较详细了,就不再赘述了。
2. api.js
import {
http
} from '../utils/util.js' var url = {
userLogin: "/user/login",
getUserPhone: "/user/phone",
...
userCardReceive: "/card/receive"
}
module.exports = {
userLogin(code) {
return http({
url: url.userLogin,
data: { code: code},
header: {
"Content-Type": "application/x-www-form-urlencoded"
}
})
},
getUserPhone(params) {
return http({
url: url.getUserPhone,
data: params
})
},
...
userCardReceive() {
return http({
url: url.userCardReceive,
method:"GET"
})
},
}
注:以函数封装请求,并以回调函数的方式返回请求结果。具体参数可根据需要单独设置。
调用方式:
http.getUserPhone(params).then(data => {
if (data) {
//返回结果的处理逻辑
...
}
})
个人原创博客,转载请注明来源地址:https://www.cnblogs.com/xyyt/p/9715367.html
微信小程序开发——使用promise封装异步请求的更多相关文章
- 微信小程序开发——使用mock数据模拟api请求
前言: 微信小程序开发中,后端提供了接口设计文档,前端可以先mock数据模拟api请求进行开发调试,而且可以根据需要设计mock文件的格式和内容,这样在后端接口开发完成之前,前端可以最大限度的完成前端 ...
- 微信小程序开发调试阶段不校验请求域名
在微信小程序开发官网上有说明: 在开发者工具的右上角有详情选项,可以勾选不校验合法域名,之后就可以与本地ip进行通信了!
- 微信小程序ES6方法Promise封装接口
为何要封装接口? 有小程序开发的经验者,相信对微信API Request很熟悉了.对接接口时,有大部分的开发者都是直接调用request方法,去请求后台接口并渲染数据.诚然,直接使用api发起请求对接 ...
- 微信小程序中使用Async-await方法异步请求变为同步请求
微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async ...
- WeChat-SmallProgram:微信小程序中使用Async-await方法异步请求变为同步请求
微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading 等.如果需要同步处理,可以使用如下方法: 提示:Async ...
- 微信小程序开发 [05] wx.request发送请求和妹纸图
1.wx.request 微信小程序中用于发起网络请求的API就是wx.request了,具体的参数太多,此处就不再一一详举了,基本使用示例如下: wx.request({ url: 'test.ph ...
- 总结微信小程序开发中遇到的坑
总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...
- 微信小程序开发06-一个业务页面的完成
前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
随机推荐
- C# 类库调试 启动外部程序无法调试
无法调试进程 test.exe [17936] 中的某些代码.请参阅下面的状态信息. IntelliTrace 代码失败(0x80131534). Managed (v4.6.v4.5.v4.0 ...
- 机器学习入门-数值特征-数据四分位特征 1.quantile(用于求给定分数位的数值) 2.plt.axvline(用于画出竖线) 3.pd.pcut(对特征进行分位数切分,生成新的特征)
函数说明: 1. .quantile(cut_list) 对DataFrame类型直接使用,用于求出给定列表中分数的数值,这里用来求出4分位出的数值 2. plt.axvline() # 用于画 ...
- Unicode UTF8 UTF16 urlencode base64
Unicode:是一个字符集,每个字符对应一个唯一的unicode编码,一般是16位. UTF8是针对Unicode的编码方式,因为如果每个字符都用unicode的编码存储的话会很浪费空间,比如说as ...
- html:meta
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale= ...
- 尚硅谷redis学习5-初识redis.conf
redis.conf是redis的配置文件,在解压后的redis安装文件夹下 单位 1 配置大小单位,开头定义了一些基本的度量单位,只支持bytes,不支持bit 2 对大小写不敏感 包含 ...
- Linux命令:ssh-add
ssh-add帮助 SSH-ADD() BSD General Commands Manual SSH-ADD() NAME ssh-add — adds private key identities ...
- java批量向oracle插入数据
由于项目需要,需要将一个6M的txt中的数据插入到oracle数据表中.txt中的数据是每行一个词.经过统计,词总数是505040.为了看起来方便,我将我的所有方法写在类入口中,数据库的信息我会用te ...
- jenkins gradle 实践总结
执行protoc 通过shell ,那么将gradle 中的proto 项目移除即可 安装 最新的idea 版本 ,并安装 最新kotlin 插件,通过http://plugins.jetbrains ...
- canvas元素绘制太极图
<!DOCTYPE html><html><head> <title>canvas example</title> <meta cha ...
- 新手如何学习Java——Java学习路线图
推荐初学者阅读:新手如何学习Java——Java学习路线图