微信小程序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 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
js倒计时显示实例
Dec 11 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP实现懒加载的方法
2015/03/07 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
python实现统计代码行数的小工具
2019/09/19 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
考试诚信承诺书
2014/05/23 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
晚会开幕词范文
2016/03/04 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
python中redis包操作数据库的教程
2022/04/19 Python
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android