前言:

有在学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封装异步请求的更多相关文章

  1. 微信小程序开发——使用mock数据模拟api请求

    前言: 微信小程序开发中,后端提供了接口设计文档,前端可以先mock数据模拟api请求进行开发调试,而且可以根据需要设计mock文件的格式和内容,这样在后端接口开发完成之前,前端可以最大限度的完成前端 ...

  2. 微信小程序开发调试阶段不校验请求域名

    在微信小程序开发官网上有说明: 在开发者工具的右上角有详情选项,可以勾选不校验合法域名,之后就可以与本地ip进行通信了!

  3. 微信小程序ES6方法Promise封装接口

    为何要封装接口? 有小程序开发的经验者,相信对微信API Request很熟悉了.对接接口时,有大部分的开发者都是直接调用request方法,去请求后台接口并渲染数据.诚然,直接使用api发起请求对接 ...

  4. 微信小程序中使用Async-await方法异步请求变为同步请求

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async ...

  5. WeChat-SmallProgram:微信小程序中使用Async-await方法异步请求变为同步请求

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading 等.如果需要同步处理,可以使用如下方法: 提示:Async ...

  6. 微信小程序开发 [05] wx.request发送请求和妹纸图

    1.wx.request 微信小程序中用于发起网络请求的API就是wx.request了,具体的参数太多,此处就不再一一详举了,基本使用示例如下: wx.request({ url: 'test.ph ...

  7. 总结微信小程序开发中遇到的坑

    总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...

  8. 微信小程序开发06-一个业务页面的完成

    前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...

  9. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

随机推荐

  1. Win7查看开关机记录

    通过系统日志可以查看,这里记得的日志很多,需要筛选一下,来个图片看的清楚: 事件ID的12,13就代表开关机,具体信息会在窗口下方显示.

  2. jqGrid基本使用

    jqGrid: 参照网址:官网地址http://www.trirand.com/ http://blog.mn886.net/jqGrid/(快速获取demo) http://www.guriddo. ...

  3. JAVA_连接池、DataSource、JNDI

    1.连接池    Connection的取得和开放是代价比较高的处理,解决这个问题的方法是连接池.    连接池就是事先取得一定数量的Connection,程序执行处理的时候不是新建Connectio ...

  4. 工厂模式——Head First

    这里主要谈论其中的工厂方法模式和抽象工厂模式. 一.定义 工厂方法模式(Factory Method Pattern)定义了一个创建对象的接口,但由子类决定要实例化的类是哪一个.工厂方法让类把实例化推 ...

  5. Cookie安全小结

    Cookie机制:一般来说,同域内浏览器中发出的任何一个请求都会带上Cookie,无论请求什么资源,请求时,Cookie出现在请求头的Cookie字段中.服务端响应头的Set-Cookie字段可以添加 ...

  6. vue项目分辨率

    vue项目分辨率写在这里:

  7. win10 搭建react-native开发环境

    本文地址:http://www.cnblogs.com/jying/p/7992130.html 系统:win10 系统内存:8G java-jdk:1.8.144 开发工具:vs code 首先是网 ...

  8. mysql 5.7.3.0-m13安装教程

    安装mysql百度经验地址:(默认安装,除了选择不更新和选择保存路径,其它基本是下一步下一步) http://jingyan.baidu.com/article/7e440953d6f0702fc1e ...

  9. DOS批量拷贝本地目录到远程主机(定时执行)

     echo !USER!  net use \\!REMOTE_ADDR!\IPC$ /u:!USER!  copy D:\batch\ip.bat \\!REMOTE_ADDR!\Admin$\ / ...

  10. 吴裕雄 python神经网络 水果图片识别(3)

    import osimport kerasimport timeimport numpy as npimport tensorflow as tffrom random import shufflef ...