微信小程序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事件实现代码
Mar 12 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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
数字转英文
2006/12/06 PHP
php扩展ZF――Validate扩展
2008/01/10 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
详解python里的命名规范
2018/07/16 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
企业晚会策划方案
2014/05/29 职场文书
收入证明怎么写
2015/06/12 职场文书
企业宣传稿范文
2015/07/23 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL