全网小程序接口请求封装实例代码


Posted in Javascript onNovember 06, 2020

前言

这篇文章主要针对一些初学者,有写的不好的地方,还请大家多多谅解!

在utils文件夹里面新建两个js文件,一个是api.js、一个就是requtil.js

api.js

这个文件主要api接口,废话不多说直接上代码了

const request = require('requtil.js')
/*Apis 把全部api都存在这里*/
const Apis = { 
 /* 用户相关 */
 'login': '/devicecenter/auth/weChtLoin',
 'bindUser': '/devicecenter/user/userBindinOpenId',
 'genQrCode': '/devicecenter/user/getUserRcode',
 
 /* 设备相关 */
 'getDeviceList': '/minipro/group/getDl', // 获取设备列表
 'getDeviceAdd': '/minipro/group/addDl', // 添加设备
 'getDeviceDtl': '/minipro/group/delDl', // 删除设备
}
/* 定义请求方法 */
const user = {
 login: function(data) {
 request.get(Apis.login, data)
 },
 getSecret: function(data) {
 request.get(Apis.getSecret, data)
 },
}
module.exports = {
 ...user
}

requtil.js

把微信的wx.request请求进行分开封装

const globalsetting = require('globalsetting.js')
const baseURL = globalsetting.server
const util = require('util.js')

const ignoreUrls = [
 '/auth/weChatLogin',
 '/user/userBindingOpenId',
 '/user/getSecret',
 '/user/getOpenId'
]
var token = ''

function post(url, args) {
 args = _prev(url, 'POST', args)
 wx.request(args)
}
function get(url, args) {
 args = _prev(url, 'GET', args)
 wx.request(args)
}
function put(url, args) {
 args = _prev(url, 'PUT', args)
 wx.request(args)
}
function _delete(url, args) {
 args = _prev(url, 'DELETE', args)
 wx.request(args)
}
function _prev(url, method, args) {
 // console.log('123',args)
 args = args || {}
 args.url = url
 if(args.urlparam) 
 args.url += '/' + args.urlparam
 var params = parseParams(args)
 params.method = method
 params.success = success(params.success)
 params.fail = fail(params.fail)
 setToken(params)
 return params
}
// 处理接口是否需要添加header.token方法
function setToken(params) {
 if (!ignoreUrls.some(url => params.url.match(new RegExp(url)))) {
 if (!params.header)
  params.header = { token: getToken() }
 else 
  params.header.token = getToken()
 } else {
 // console.log('ignore: ', params.url)
 }
}
// 处理接口参数方法
function parseParams(args) {
 var params = Object.assign(args)
 if (!(params.url.startsWith('https://') || params.url.startsWith('http://')))
 params.url = baseURL + params.url
 if(params.param) {
 if (params.url.indexOf('?') > -1 && params.url.indexOf('?') != params.url.length - 1) {
  params.url += '&' 
 } else if(params.url.indexOf('?') == params.url.length -1) {
  // 无任何操作
 } else {
  params.url += '?'
 }
 var buf = ''
 for(var name in params.param) {
  let val = params.param[name];
  buf += name + '=' + encodeURI(typeof val == 'object' ? JSON.stringify(val) : val) + '&'
 }
 params.url += buf
 }
 return params
}
// 接口返回成功方法
function success(callback) {
 return function(rs) {
 var status = rs.statusCode
 if (status == 405) {
  util.errorMsg('请求失败405:\n服务器返回失败')
 } else if(status == 404) {
  util.errorMsg('请求失败404:\n找不到接口')
 }
 if(callback) callback(rs.data)
 }
}

function fail(callback) {
 return function(rs) {
 console.log(rs)
 if(callback) callback(rs)
 }
}
// 获取接口请求回来的token
function _setToken(tk) {
 token = tk
 wx.setStorageSync('token', token)
}

页面怎么调用

在全局的app.js里面

import api from './utils/apis.js';
App({
	api: api,
})

index页面

通过getApp()获取api接口,自定义一个函数里面用到了promise方法获取数据,然后在getDevList调用getChatRecord方法,就可以数据赋值

const APP = getApp()
getDevList(e){
 this.getChatRecord().then(res => {
 wx.hideLoading({
  success: (res) => {},
 });
 if(res.id == '-1') {
  utils.errorMsg(res.message);
 }else {
  console.log(res)
 }
 })
}
// 设备列表请求接口
getChatRecord (params = {}) {
 return new Promise((resolve, reject) => {
 APP.api.getDeviceList({
  success: res => {
  resolve(res)
  }
 })
 })
},

后期我会做一个demo出来,放到github上面,这样你们看起来更直观一些

总结

到此这篇关于全网小程序接口请求封装实例的文章就介绍到这了,更多相关全网小程序接口请求封装内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js Dialog 实践分享
Oct 22 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 #Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 #Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 #Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 #Javascript
vue中的计算属性和侦听属性
Nov 06 #Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 #Javascript
使用Vue实现一个树组件的示例
Nov 06 #Javascript
You might like
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
Chrome Web App开发小结
2014/09/04 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
php实现socket推送技术的示例
2017/12/20 PHP
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
vue如何搭建多页面多系统应用
2020/06/17 Javascript
linux下python使用sendmail发送邮件
2018/05/22 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
详解python中的json和字典dict
2018/06/22 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
使用python3实现操作串口详解
2019/01/01 Python
Python语法分析之字符串格式化
2019/06/13 Python
Python 定义只读属性的实现方式
2020/03/05 Python
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
人事专员职责
2014/02/22 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
初中作文评语
2014/12/25 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
python分分钟绘制精美地图海报
2022/02/15 Python