【微信小程序原生】封装request

新建一个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不限定服务提供都，可以是自己开发的业务服务端，也可以用于第三方服务的调用；

// request.js 内容
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

新建一个agriknow类在agriknow里面做了以下几件事：

实现所有业务服务调用，如查询所有新闻列表【getNews】，查询所有课程列表【getCourseList】；
实现统一的异常处理，并传给request；
将服务端返回的结果response转成response.data回传给API调用的地方

/*** agriknow.js-*/
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 requestthis._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

函数的调用
在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: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.listthis.setData({courseData: list})}).catch(res => {wx.stopPullDownRefresh()wx.showToast({title: '出错了！',icon: 'none'})})},//下拉刷新onPullDownRefresh() {console.log("下拉刷新");this.getdataList();},…………
})

【微信小程序原生】封装request相关推荐

【微信小程序】封装request以及对接口进行模块化
1. 封装request:request.js // 服务器地址 const host = "XXX" // 获取token(登录时拿到token进行存储) function Ur ...
微信小程序原生上传图片封装
资源参考组件免费下载地址概述微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示 ...
小程序promise封装post请求_微信小程序promise封装get/post请求
微信小程序promise封装get/post请求 2020-07-04 20:42:49 微信小程序promise封装get/post请求叶子兔 2018-10-10 08:55:30 1056 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
微信小程序如何封装api接口
微信小程序如何封装api接口一. 小程序接口请求流程二,域名配置一定要配置https,小程序上配置的域名必须是域名备案的三.打开微信开发者工具,打开你的项目,点开详情.确认一下域名是否一一匹对 ...
【微信小程序请求封装】【进阶版】处理401请求token过期--重新登录--重新发起刚才过期的请求
微信小程序请求封装(拦截器):处理请求过期–重新登录–重新发起刚才过期的请求 env.js //这里使用的接口呢都是自己模拟的,可以根据自己的需求进行添加module.exports={//开发环境的 ...
uni-app微信小程序上传图片封装
概述 uni-app 微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示上传图标 c ...
小程序中封装ajax请求,如何在微信小程序中封装网络请求
如何在微信小程序中封装网络请求发布时间:2021-05-11 16:59:36 来源:亿速云阅读:95 作者:Leah 这期内容当中小编将会给大家带来有关如何在微信小程序中封装网络请求,文章内容丰 ...
python写的小程序怎么封装_Promise实现微信小程序接口封装过程
Promise实现微信小程序接口封装过程发布时间:2020-06-15 13:40:43 来源:亿速云阅读:419 作者:鸽子相信很多开发者都遇到过回调地狱的问题.由于微信小程序的API基本都是 ...
微信小程序简单封装接口
微信小程序接口封装比如说,现在我要访问后台数据,我面临两个问题: 我可能在多个模块中向后台发送数据请求,每次都需要再写一遍url 地址当获取数据的地址发生变化时,我需要修改项目中所有的url地址 ...

【微信小程序原生】封装request

【微信小程序原生】封装request相关推荐

最新文章

热门文章

【微信小程序原生】 封装request

【微信小程序原生】 封装request相关推荐

最新文章

热门文章

【微信小程序原生】封装request

【微信小程序原生】封装request相关推荐