微信小程序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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
JS原形与原型链深入详解
May 09 Javascript
Vue实现简单购物车功能
Dec 13 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
PHP 基本语法格式
2009/12/15 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php的curl封装类用法实例
2014/11/07 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
Script的加载方法小结
2011/01/12 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
Python变量和数据类型详解
2017/02/15 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python基础教程之while循环
2019/08/14 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
结婚周年感言
2014/02/24 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
入党介绍人评语
2014/05/06 职场文书
军训通讯稿范文
2015/07/18 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python