微信小程序wx.request的简单封装


Posted in Javascript onNovember 13, 2019

这些天团队里开始做小程序开发了,之前没做过,都是第一次,第一次的感觉大家都懂的。周末看了一下小程序项目的代码,在网络请求上发现了一些小问题,最终没忍住想了点办法把request封装了一下。下面来看看吧。

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

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

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

微信小程序wx.request的简单封装

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 = { '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();
 },
 ……
 ……
})

所有的东西大概就是这个样子了,就这么个意思,希望对大家有点用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 #Javascript
highcharts.js数据绑定方式代码实例
Nov 13 #Javascript
vue prop属性传值与传引用示例
Nov 13 #Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 #Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 #Javascript
Jquery异步上传文件代码实例
Nov 13 #jQuery
解决ele ui 表格表头太长问题的实现
Nov 13 #Javascript
You might like
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
python实现爬取图书封面
2018/07/05 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
会计应届生的自荐信
2013/12/13 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
单位承诺书格式
2014/05/21 职场文书
另类冲刺标语
2014/06/24 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
golang 如何用反射reflect操作结构体
2021/04/28 Golang
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers