这些天团队里开始做小程序开发了,之前没做过,都是第一次,第一次的感觉大家都懂的。周末看了一下小程序项目的代码,在网络请求上发现了一些小问题,最终没忍住想了点办法把request封装了一下。下面来看看吧。
看项目代码时发现了下面几点问题:
针对这些问题,首先在项目目录里新建了一个apis的目录,把所有与API请求的东西都放在这个目录里,如下图这样。
1. 新建一个request类,对wx.request进行简单封装 在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里面做了以下几件事:
/** * 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 = { 'data-tupe': '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(); }, …… …… })
所有的东西大概就是这个样子了,就这么个意思,希望对大家有点用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程(cainiaojc.com)。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。