小程序封装

看项目代码时发现了下面几点问题：

• 网络请求都写在Page里，每一个请求都要重复的写wx.request以及一些基础配置；
• 每一个页面里都要处理相同类型的异常；
• 后端返的http status code为200之外时，并不能直接进入fail对应函数进行处理；

针对这些问题，首先在项目目录里新建了一个apis的目录，把全部与API请求的东西都放在这个目录里，以下图这样。

 

apis目录结构

1. 新建一个request类，对wx.request进行简单封装
在request类里作了如下几件事:

 

• 在构造函数里建立默认请求的http header，能够在header里配制一些内容，在对应请求方法中若是没有设置header参数，就使用此默认header参数；
• 以get post delete put等方法对request进行封装，在发起网络请求不须要重复的写wx.request({method:xxx})这些代码，只要调用getRequest、postRequest等方法就能够了；
• 在rquest的结果返回处理函数success中，断定服务端返回的状态代码，对于200状态代码的按业务处理成功处理，对于非200的状态码按异常处理。
• 预留统一异常处理函数处理接口，能够经过setErrorHandler来设置统一的异常处理，这样对于一些能够统一处理的异常就不用在业务页面里去重复处理了，例如后端返回401的代码，就能够统一转到登陆页面让用户登陆了；
• 此request不限定服务提供都，能够是本身开发的业务服务端，也能够用于第三方服务的调用；

/** * name: api.js * description: request处理基础类 * author: 徐磊 * date: 2018-5-19 */ class request { constructor() { this._header = {} } /** * 设置统一的异常处理 */ setErrorHandler(handler) { this._errorHandler = handler; } /** * GET类型的网络请求 */ getRequest(url, data, header = this._header) { return this.requestAll(url, data, header, 'GET') } /** * DELETE类型的网络请求 */ deleteRequest(url, data, header = this._header) { return this.requestAll(url, data, header, 'DELETE') } /** * PUT类型的网络请求 */ putRequest(url, data, header = this._header) { return this.requestAll(url, data, header, 'PUT') } /** * POST类型的网络请求 */ postRequest(url, data, header = this._header) { return this.requestAll(url, data, header, 'POST') } /** * 网络请求 */ requestAll(url, data, header, method) { return new Promise((resolve, reject) => { wx.request({ url: url, data: data, header: header, method: method, success: (res => { if (res.statusCode === 200) { //200: 服务端业务处理正常结束 resolve(res) } else { //其它错误，提示用户错误信息 if (this._errorHandler != null) { //若是有统一的异常处理，就先调用统一异常处理函数对异常进行处理 this._errorHandler(res) } reject(res) } }), fail: (res => { if (this._errorHandler != null) { this._errorHandler(res) } reject(res) }) }) }) } } export default request 

2. 新建一个agriknow类
在agriknow里面作了如下几件事：

• 实现全部业务服务调用，如查询全部新闻列表【getNews】，查询全部课程列表【getCourseList】；
• 实现统一的异常处理，并传给request；
• 将服务端返回的结果response转成response.data回传给API调用的地方；

/** * name: agriknow.js * description: 农知汇服务器提供的服务 * author: 徐磊 * date: 2018-5-19 */ import request from './request.js' class agriknow { constructor() { this._baseUrl = 'https://apis.xxx.xxx.com/dev/apis/train/v1/' this._defaultHeader = { 'Content-Type': 'application/json' } this._request = new request this._request.setErrorHandler(this.errorHander) } /** * 统一的异常处理方法 */ errorHander(res) { console.error(res) } /** * 查询全部新闻列表 */ getNews(page = 1, size = 10) { let data = { page: page, size: size } return this._request.getRequest(this._baseUrl + 'news/client', data).then(res => res.data) } /** * 获取全部课程 */ getCourseList(page = 1, size = 10, key = null) { let data = key != null ? { page: page, size: size, queryValue: key } : { page: page, size: size } return this._request.getRequest(this._baseUrl + '/course/mobile', data).then(res => res.data) } } export default agriknow 

3. 函数的调用

• 在app中引用argriknow

  import agriknow from './apis/agriknow.js' App({ onLaunch: function () { // 展现本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) …… …… 

• 定义一个类型为agriknow的属性并实例化

  import agriknow from './apis/agriknow.js' App({ onLaunch: function () { // 展现本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) …… …… }, agriknow:new agriknow() }) 

• 在Page里调用

  const app = getApp(); Page({ data: { courseData: [], page: 1, size: 10, total: 0 }, onLoad: function () { …… …… wx.startPullDownRefresh() this.getdataList(); }, //查询课程列表 getdataList() { app.agriknow.getCourseList(this.data.page++, this.data.size, '') .then(res => { wx.stopPullDownRefresh() let list = this.data.page > 2 ? this.data.courseData.concat(res.list) : res.list this.setData({ courseData: list }) }) .catch(res => { wx.stopPullDownRefresh() wx.showToast({ title: '出错了！', icon: 'none' }) }) }, //下拉刷新 onPullDownRefresh() { console.log("下拉刷新"); this.getdataList(); }, …… …… }) 

全部的东西大概就是这个样子了，就这么个意思，但愿对你们有点用