微信小程序开发之Http封装
时间:2017-06-16 21:09:25
收藏:0
阅读:720
公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意。
于是上网查了一下,就开始着手开发。。。。。
首先开发客户端的东西,都有个共同点,那就是 数据请求!
看了下小程序的请求方式大概和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=>{
//请求失败
}) }
好了今天就说到这,下篇将持续更新在小程序中遇到的坑
评论(0)