微信小程序 wx.request 的封装
时间:2022-04-26
本文章向大家介绍微信小程序 wx.request 的封装,主要内容包括业务相关 js、使用 Promise 封装 wx.request、业务对应的配置 js、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了废话不多说,切入主题,最近自己尝试了一下小程序开发,坑么总是有的,但是我觉得还是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('', -1)
let data = {
subAccountIdx: 0,
startDay: yestoday,
endDay: yestoday,
type: 0,
business: 0,
export: false
}
api.getLastCost(data, 'application/x-www-form-urlencoded', 'POST').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 = 'application/json',
method = 'GET',
...other
} = {...config}
wx.request({
url: url,
data: {...data},
method: method,
header: {
'content-type': contentType,
'Cookie': app.globalData.cookie // 全局变量中获取 cookie
},
success: (data) => resolve(data),
fail: (err) => reject(err)
})
}
module.exports = {
wxRequest: wxRequest
}
封装的代码很简单,接下来就是配置代码了
业务对应的配置 js
// 用 import 或者 require 引入模块
import util from '../../../util/util.js'
var Promise = require('../../../plugin/promise.js') // 请注意 Promise 要手动引入,内测版是自动引入的
// 获取个人信息
const API_USERINFO = "https://www.***/get"
// 获取剩余金额
const API_BALANCE = 'https://www.***/get'
// 获取昨日消费数据
const API_LASTCOST = 'https://www.***/get'
// 获取个人信息事件
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 切换也方便,当然如果你们的传参方式只有一种可以写死更简单一些,作为前端菜鸟的第一篇文章希望能帮助到几个人,最希望大佬们不吝赐教,指点指点。
本文作者: frontX 原文地址:微信小程序 wx.request 的封装 声明:本文来源于网络,版权归作者所有,不代表本专栏观点,有什么问题请联系我,谢谢!
- 安装python虚拟环境
- 各种排序算法的分析及java&python实现
- python3elk相关---根据Elasticsearch(es)日志处理,生成excel并定时邮箱发送附件
- python数据科学-数据预处理
- python3 邮箱相关邮箱的服务
- 谈一谈Python中str()和repr()的区别
- TensorFlow从0到1 - 15 - 重新思考神经网络初始化
- python2.7搬运--->TensorFlow - 深度学习破解验证码
- 来学习几个简单的Hive函数啦
- 推荐系统实战-基于用户的协同过滤
- 素数的筛法
- 听说GAN很高大上,其实就这么简单
- python3 解码base64遇到的问题与解决
- TensorFlow从0到1 - 16 - L2正则化对抗“过拟合”
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- android实现微信朋友圈发布动态功能
- 基于Android studio3.6的JNI教程之helloworld思路详解
- 基于Android studio3.6的JNI教程之opencv实例详解
- AndroidStudio代码达到指定字符长度时自动换行实例
- android studio 新建项目报错的解决之路
- Android Studio 3.6中使用视图绑定替代 findViewById的方法
- Android 使用View Binding的方法详解
- CentOS一键安装Resilio Sync脚本
- Python从URL获取图片、读取图片格式并保存到本地
- Linux一键屏蔽指定国家所有的IP访问
- React基础(9)-React中发送Ajax请求以及Mock数据
- 一个快速引入CDN的workflow
- 在Ryzen平台上安装macOS High Sierra苹果系统
- v-selectpage 基于Vue2的高清重制版
- Android Studio3.6中的View Binding初探及用法区别