为什么需要封装
小程序原生的http请求方式略有生硬,不封装下,感觉就像在撸jquery的ajax一样。而且,我们如果要做请求拦截,jwt鉴权的时候,也会有封装request的要求的。
封装基础http service
封装常用的 get post put delete 等方法 在这里我们可以做路由拦截 也可以配后后端做鉴权
/**
* 经过艰难的抉择 关于模块选择用 es6的模块导入导出模式 不用小程序的模块导入导出
* const app = getApp(); 这个只有在小程序初始化完成 app才会有值 所以我们不能在app.js 里面使用这个封装的请求库
*/
const app = getApp();
export class BaseService {
constructor() { }
// get 方法
get(url) {
return this.request('GET', url);
}
// post 方法
post(url, data) {
return this.request('POST', url, data);
}
// put 方法
put(url, data) {
return this.request('PUT', url, data);
}
// 请求的根方法 这里的一些配置从 app 里面读的 我们也可以从配置项里面读取
async request(method, url, data) {
// 这里就栽在做请求的拦截
return await new Promise((resolve, reject) => {
wx.request({
url: `https://${app.globalData.apiUrl}/${url}`,
data: data || null,
method: method || 'GET',
header: {
// 这里可以配合后端做鉴权
'ticket': app.globalData.ticket || null
},
success: (res) => {
// 这里需要做响应拦截的
if (res.statusCode < 400) {
resolve(res.data);
} else {
wx.showToast({
title: url.split('/')[2] + ';' + (res.data.Message || JSON.stringify(res.data)),
icon: 'none',
duration: 3000
})
reject(res.data)
}
},
fail: (err) => {
// 这里的失败一般指网络失败 请求没发出去的失败
reject(err);
}
})
})
}
}
封装常用的业务 http service
import { BaseService } from './base';
const baseService = new BaseService();
export class TokenService {
constructor() { }
// 获取 ticket
getTicket(data) {
return baseService.post(`api/WebSocketService/GetWeChatUserToken`, data);
}
// 获取 code
async wxLogin() {
return await new Promise((resolve, reject) => {
wx.login({
success(res) {
resolve(res.code);
},
fail(err) {
reject(err)
}
})
})
}
}
在具体业务代码中调用
import { TokenService } from '../../apiservices/token';
const tokenService = new TokenService();
Page({
data: {
code: '',
info: null
},
onLoad() {
// 获取 code
tokenService.wxLogin().then(res => {
this.data.code = res.code
})
},
getUserInfo: function(e) {
if (e.detail.errMsg === 'getUserInfo:ok') {
this.data.info = e.detail
this.setData({
hasUserInfo: true
})
this.getAuth();
} else {
wx.showToast({
title: '为了体验更好的功能,请您重新授权',
icon: 'none',
duration: 2000
})
}
},
getAuth() {
const models = {...this.data.info, code: this.data.code}
tokenService.getTicket(models).then(res => {
console.log(res.data.ticket)
console.log(res.data.openId)
console.log(res.data.unionId)
})
}
})