微信小程序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 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
javascript实现微信分享
Dec 23 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
浅析node.js的模块加载机制
May 25 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 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 return语句的另一个作用
2014/07/30 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
python实现AES加密和解密
2019/03/27 Python
Python网页解析器使用实例详解
2020/05/30 Python
使用python实现名片管理系统
2020/06/18 Python
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
中科软笔试题和面试题
2014/10/07 面试题
教师求职信范文分享
2013/12/27 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
2014年计生标语
2014/06/23 职场文书
首席执行官观后感
2015/06/03 职场文书
学籍证明模板
2015/06/18 职场文书
电视新闻稿
2015/07/17 职场文书
公司员工管理制度
2015/08/04 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA
Python字符串格式化方式
2022/04/07 Python