258资源分享网

公司突然要开放微信小程序，持续蒙蔽的我还不知道小程序是个什么玩意。

于是上网查了一下，就开始着手开发。。。。。

首先开发客户端的东西，都有个共同点，那就是 数据请求！

看了下小程序的请求方式大概和ajax请求差不多，所以先打好基础 从封装http请求开始

好了废话不多说了，上代码

首先。。。。当然是建立配置文件，用来配置请求根路径

config.js

export default { basePath: ':9002/api', fileBasePath: ':9002', //basePath: ':8989/api', //fileBasePath: ':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