实例详解微信小程序wx.request 的封装

最近自己尝试了一下小程序开发，坑么总是有的，但是我觉得还是request这部分实在是不好看，所以你懂得，我用promise 对请求做了个简单封装。本文章所述方法主要针对第三方登录。

废话不多说直接贴代码：

业务相关 js

// 获取剩余金额 --- GET 请求无参数
 getBalance: function () {
 api.getBalance().then(data = {
 let balance = data.data
 balance.balance = balance.balance.toFixed(2)
 this.setData({
 balance: { ...balance }
 // 获取昨日消费数据 --- POST 请求，使用 application/x-www-form-urlencoded 传参
 getLastCost: function () {
 let yestoday = util.transDate( #39; #39;, -1)
 let data = {
 subAccountIdx: 0,
 startDay: yestoday,
 endDay: yestoday,
 type: 0,
 business: 0,
 export: false
 api.getLastCost(data, #39;application/x-www-form-urlencoded #39;, #39;POST #39;).then(data = {
 let lastCost = data.data.record.totalConsumeMoney
 lastCost = lastCost.toFixed(2)
 this.setData({
 lastCost: lastCost
 }

从上面的代码是业务部分代码，不知道你是否喜欢这种方式呢，接下来就看看 封装方式 和 业务对应的配置 js

使用 Promise 封装 wx.request

我们大部分网站都是用 cookie 来维护登录状态的，但是小程序是无法用 cookie 来维护登录状态的，那么我们先获取请求头的 cookie， 然后将 cookie 保存在全局变量当中（相信获取 cookie 肯定没问题吧， 这部分就不展示了）

// wx.request 封装
var app = getApp() 
function wxRequest(url, config, resolve, reject) {
 let { 
 data = {},
 contentType = #39;application/json #39;,
 method = #39;GET #39;,
 ...other
 } = {...config}
 wx.request({
 url: url,
 data: {...data},
 method: method,
 header: {
 #39;content-type #39;: contentType,
 #39;Cookie #39;: app.globalData.cookie // 全局变量中获取 cookie
 success: (data) = resolve(data),
 fail: (err) = reject(err)
module.exports = {
 wxRequest: wxRequest
}

封装的代码很简单，接下来就是配置代码了

业务对应的配置 js

// 用 import 或者 require 引入模块 
import util from #39;../../../util/util.js #39;
var Promise = require( #39;../../../plugin/promise.js #39;) // 请注意 Promise 要手动引入，内测版是自动引入的
// 获取个人信息
const API_USERINFO = https://www.***/get 
// 获取剩余金额
const API_BALANCE = #39;https://www.***/get #39;
// 获取昨日消费数据
const API_LASTCOST = #39;https://www.***/get #39;
// 获取个人信息事件 
function getUserInfo(data, contentType) {
 var promise = new Promise((resolve, reject) = {
 util.wxRequest(API_USERINFO, { data, contentType }, resolve, reject)
 // return promise
 return promise.then(res = {
 return res.data
 }).catch(err = {
 console.log(err) 
// 获取剩余金额事件
function getBalance(data, contentType) {
 var promise = new Promise((resolve, reject) = {
 util.wxRequest(API_BALANCE, { data, contentType }, resolve, reject)
 // return promise
 return promise.then(res = {
 return res.data
 }).catch(err = {
 console.log(err)
// 获取昨日消费数据
function getLastCost(data, contentType, method) {
 var promise = new Promise((resolve, reject) = {
 util.wxRequest(API_LASTCOST, { data, contentType, method }, resolve, reject)
 // return promise
 return promise.then(res = {
 return res.data
 }).catch(err = {
 console.log(err)
module.exports = {
 getUserInfo: getUserInfo,
 getBalance: getBalance,
 getLastCost: getLastCost
}

上面的代码看起来像是步骤变多了，但是这样的好处是维护方便，在业务代码里只关注业务，而不用去关注请求的本身，content-type 切换也方便，当然如果你们的传参方式只有一种可以写死更简单一些，作为前端菜鸟的第一篇文章希望能帮助到几个人，最希望大佬们不吝赐教，指点指点。

相关推荐：

微信小程序wx.request实现后台数据交互功能分析

小程序开发--网络请求wx.request实例教程

小程序开发--wx.request异步封装实例教程

以上就是实例详解微信小程序wx.request 的封装的详细内容，更多请关注php中文网其它相关文章！

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！