微信小程序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=>{
//请求失败
}) }
好了今天就说到这,下篇将持续更新在小程序中遇到的坑