微信小程序开发——使用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来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
随机推荐
- VC中明明已经添加了头文件却还提示未定义的问题
我在VS中编译程序遇到这个错误:error C3861: 'ReadDirectoryChangesW': identifier not found, even with argument-depen ...
- maven插件之checkstyle
checkstyle的eclipse插件已经在eclipse中有讲过,用于开发者自查用.但是不能保证开发者能按照checkstyle进行改正或者自查,因此就需要对未checkstyle通过的代码不能编 ...
- 5分钟快速打造WebRTC视频聊天<转>
原文地址: 5分钟快速打造WebRTC视频聊天 百度一下WebRTC,我想也是一堆.本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本 ...
- ABAP-异常捕获
异常处理 基于类的异常exception classes 捕获 使用老式方式捕获catchable runtime errors 向上抛出异常 手动触发异常(类异常) 6.1版本以后,TRY…ENDT ...
- 初识web.xml文件
做了那么久的web项目都没有花心思了充分解下这个文件有什么用,看项目配制是否都差不多呢 ======================================================== ...
- js -history.back(-1)和history.go(-1) 区别
既然history.back(-1)和history.go(-1)都是返回之前页面, history.back(-1)//直接返回当前页的上一页,,是个新页面 history.go(-1)// ...
- 趣味编程:静夜思(Swift版)
func verticalWriting(txt:String, offset:Int) { Dictionary(grouping: txt.enumerated(), by: {$0.0 % of ...
- LeetCode OJ 56. Merge Intervals
题目 Given a collection of intervals, merge all overlapping intervals. For example, Given [1,3],[2,6], ...
- 22.struts2-拦截器.md
目录 1.执行的流程时序图 1.执行的流程时序图 回顾: Struts配置: * 通配符.动态方法调用 * 全局跳转配置.配置的默认值.常量配置 * Struts核心业务 * 请求数据的自动封装 (p ...
- Jsp基本语法 第二章
今天是星期天,我学习了关于Jsp的一些基本页面元素 首先学习了一些基本页面注释 1.HTML的注释 <!-- htmI注释-->// 客户端可见 2.JSP的注释: <%-- ...