微信小程序Http高级封装 es6 promise
公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意。
于是上网查了一下,就开始着手开发。。。。。
首先开发客户端的东西,都有个共同点,那就是 数据请求!
看了下小程序的请求方式大概和ajax请求差不多,所以先打好基础 从封装http请求开始
好了废话不多说了,上代码
首先。。。。当然是建立配置文件,用来配置请求根路径 config.js
export default {
basePath: 'http://192.168.6.2:9002/api',
fileBasePath: 'http://192.168.6.2:9002',
//basePath: 'http://127.0.0.1:8989/api',
//fileBasePath: 'http://127.0.0.1:8989',
defaultImgUrl:'/pages/Images/default.png'
}
这里我用到es6来写逻辑代码 所以自行引用兼容代码es6-promise.js
下面是核心代码 ServiceBase.js
import __config from '../etc/config'
import es6 from '../assets/plugins/es6-promise' class ServiceBase {
constructor() {
Object.assign(this, {
$$basePath: __config.basePath
})
this.__init()
} /**
* __init
*/
__init() {
this.__initDefaults()
this.__initMethods()
} /**
* __initDefaults
*/
__initDefaults() {
// 方法名后缀字符串
this.suffix = 'Request' // 发起请求所支持的方法
this.instanceSource = {
method: [
'OPTIONS',
'GET',
'HEAD',
'POST',
'PUT',
'DELETE',
'TRACE',
'CONNECT',
]
}
} /**
* 遍历对象构造方法,方法名以小写字母+后缀名
*/
__initMethods() {
for (let key in this.instanceSource) {
this.instanceSource[key].forEach((method, index) => {
this[method.toLowerCase() + this.suffix] = (...args) => this.__defaultRequest(method, ...args)
})
}
} /**
* 以wx.request作为底层方法
* @param {String} method 请求方法
* @param {String} url 接口地址
* @param {Object} params 请求参数
* @param {Object} header 设置请求的 header
* @param {String} dataType 请求的数据类型
*/
__defaultRequest(method = '', url = '', params = {}, header = {}, dataType = 'json') {
const $$header = Object.assign({}, this.setHeaders(), header)
const $$url = this.setUrl(url) // 注入拦截器
const chainInterceptors = (promise, interceptors) => {
for (let i = 0, ii = interceptors.length; i < ii;) {
let thenFn = interceptors[i++]
let rejectFn = interceptors[i++]
promise = promise.then(thenFn, rejectFn)
}
return promise
}
//加入token信息
params.AccessToken = wx.getStorageSync('token');
params.Version = wx.getStorageSync('Version')||"20151101";
// 请求参数配置
const $$config = {
url: $$url,
data: params,
header: $$header,
method: method,
dataType: dataType,
} let requestInterceptors = []
let responseInterceptors = []
let reversedInterceptors = this.setInterceptors()
let promise = this.__resolve($$config) // 缓存拦截器
reversedInterceptors.forEach((n, i) => {
if (n.request || n.requestError) {
requestInterceptors.push(n.request, n.requestError)
}
if (n.response || n.responseError) {
responseInterceptors.unshift(n.response, n.responseError)
}
}) // 注入请求拦截器
promise = chainInterceptors(promise, requestInterceptors) // 发起HTTPS请求
promise = promise.then(this.__http) // 注入响应拦截器
promise = chainInterceptors(promise, responseInterceptors) // 接口调用成功,res = {data: '开发者服务器返回的内容'}
promise = promise.then(res => res.data, err => err) return promise
} /**
* __http - wx.request
*/
__http(obj) {
return new es6.Promise((resolve, reject) => {
obj.success = (res) => resolve(res)
obj.fail = (res) => reject(res)
wx.request(obj)
})
} /**
* __resolve
*/
__resolve(res) {
return new es6.Promise((resolve, reject) => {
resolve(res)
})
} /**
* __reject
*/
__reject(res) {
return new es6.Promise((resolve, reject) => {
reject(res)
})
} /**
* 设置请求路径
*/
setUrl(url) {
return `${this.$$basePath}${this.$$prefix}${url}`
} /**
* 设置请求的 header , header 中不能设置 Referer
*/
setHeaders() {
return {
// 'Accept': 'application/json',
// 'Content-type': 'application/json',
"Content-Type": "application/x-www-form-urlencoded"
//'Authorization': 'Bearer ' + wx.getStorageSync('token')
}
} /**
* 设置request拦截器
*/
setInterceptors() {
return [{
request: (request) => {
request.header = request.header || {}
request.requestTimestamp = new Date().getTime()
//如果token在header中 token在参数中注入if (request.url.indexOf('/api') !== -1 && wx.getStorageSync('token')) {
//request.header.Authorization = 'T ' + wx.getStorageSync('token') }
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 10000,
mask: !0,
})
return request
},
requestError: (requestError) => {
wx.hideToast()
console.log('error-------------');
return requestError
},
response: (response) => {
console.log(response)
response.responseTimestamp = new Date().getTime()
if (response.statusCode == 401
|| response.statusCode == 403
|| (response.data.code == -1 && response.data.tips =="云客户端连接失败"))
{
wx.removeStorageSync('token')
wx.removeStorageSync('userinfo')
wx.redirectTo({
url: '/pages/login/login?isfail=true'
})
}
wx.hideToast()
return response
},
responseError: (responseError) => {
wx.hideToast()
return responseError
},
}]
}
} export default ServiceBase
下面是业务逻辑的DAO层
import ServiceBase from 'ServiceBase' class Service extends ServiceBase {
constructor() {
super()
this.$$prefix = ''
this.$$path = {
register:'/login/weregister',//注册
signIn : '/login/login',//登陆
wechatSignIn: '/login/welogin',//微信登陆
signOut: '/login/logout',//退出 }
}
//openid和基本信息注册
register(params)
{
return this.postRequest(this.$$path.register, params)
}
//用户名密码登陆
signIn(params) {
return this.postRequest(this.$$path.signIn, params)
}
//微信登陆
wechatSignIn(params) {
return this.postRequest(this.$$path.wechatSignIn, params)
}
signOut() {
return this.postRequest(this.$$path.signOut)
} } export default Service
有人可能会问 如何进行get请求?
this.postRequest 换成 this.getRequest 即可 其他put,delete 类似
然后在全局app.js 进行引用
import HttpService from 'Core/HttpService'
App({
...
...
HttpService: new HttpService
})
最后调用方式
signIn(cb) {
//测试默认登陆成功
app.HttpService.signIn({
username: '571115139',
password: '666666',
})
.then(data => {
//请求成功
console.log(data) //测试数据 cb() }).catch(e=>{
//请求失败
}) }
好了今天就说到这,下篇将持续更新在小程序中遇到的坑
微信小程序Http高级封装 es6 promise的更多相关文章
- 微信小程序初体验--封装http请求
最近看了一下微信小程序,大致翻了一下,发现跟angular很相似的,但是比angular简单的很多具体可参考官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev ...
- mpvue学习笔记-之微信小程序数据请求封装
简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...
- 微信小程序API接口封装
@ 目录 一,让我们看一下项目目录 二,让我们熟悉一下这三个文件目的(文件名你看着办) 三,页面js中如何使用 今天的API的封装,我们拿WX小程序开发中,对它的API (wx.request)对这个 ...
- 微信小程序 request请求封装
在utils文件夹新建文件utils.js,封装代码如下: 小程序升级后内部不自带Promise方法,需外部引入Promise方法 var sendRequest = function (url, ...
- 微信小程序 es6-promise.js封装请求 处理异步进程
下载es6-promise.js置于根目录下的libs文件夹下: 在根目录utils文件夹下新建httpsPromisify.js,即定义封装请求的方法 var Promise = require(' ...
- 微信小程序request请求封装,验签
1/ 公共文件util添加 request请求 //简单封装请求 function request(params, path, isShowLoading = true, goBack = false ...
- 微信小程序自定义组件封装及父子间组件传值
首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogra ...
- 微信小程序4 - 几个ES6基础写法
1. 默认参数 function demo(param){ param=param || {};} 新的写法,很直观 function demo(param={}){} 2. 简化方法,如你所见,de ...
- 微信小程序前端function封装
funtion的封装 utils =>http.js var tips = { 1: "没有网络", 999: "无效的请求", 5000: " ...
随机推荐
- 【刷题】LOJ 2587 「APIO2018」铁人两项
题目描述 比特镇的路网由 \(m\) 条双向道路连接的 \(n\) 个交叉路口组成. 最近,比特镇获得了一场铁人两项锦标赛的主办权.这场比赛共有两段赛程:选手先完成一段长跑赛程,然后骑自行车完成第二段 ...
- 【刷题】LOJ 6226 「网络流 24 题」骑士共存问题
题目描述 在一个 \(\text{n} \times \text{n}\) 个方格的国际象棋棋盘上,马(骑士)可以攻击的棋盘方格如图所示.棋盘上某些方格设置了障碍,骑士不得进入. 对于给定的 \(\t ...
- 关于找List的中间Node
初始值 slow = fast = head; 如果使用 fast && fast->next && fast->next->next 作为快慢指针循 ...
- 【hdu3842】 Machine Works
http://acm.hdu.edu.cn/showproblem.php?pid=3842 (题目链接) 题意 一个公司使用一个厂房$D$天,希望获利最大.有$n$台机器,每一台可以在第$D_i$天 ...
- spring.net框架配置和使用
spring.net框架学习笔记 spring.net框架是用于解决企业应用开发的复杂性的一种容器框架,它的一大功能IOC(控制反转),通俗解释就是通过spring.net框架的容器创建对象实体,而不 ...
- ssm controller层 junit单元测试
原文链接:https://www.cnblogs.com/oucbl/p/5943743.html springmvc controller junit 测试 作者:blouc@qq.com本文为作者 ...
- linux 条件变量与线程池
条件变量Condition Variables 概述 1. 条件变量提供了另外一种线程同步的方式.如果没有条件变量,程序需要使用线程连续轮询(可能在临界区critical section内)方式检查条 ...
- 查找和替换img src
$("#imgId")[0].src; //获取 $("#imgId").attr('src',path); //修改
- decimal, float 和double
阿里的 Java 手册里写着: 6. [强制] 小数类型为 decimal,禁止使用 float 和 double. 说明:float 和 double 在存储的时候,存在精度损失的问题,很可能在值的 ...
- 20155236 2016-2017-2 《Java程序设计》第八周学习总结
20155236 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 通用API 日志 1.日志API简介:java.util.logging包中提供了日志功能相 ...