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


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 相关文章推荐
jQuery 事件队列调整方法
Sep 18 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 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
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python MD5加密实例详解
2017/08/02 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python之时间和日期使用小结
2019/02/14 Python
Python的UTC时间转换讲解
2019/02/26 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
综合内勤岗位职责
2014/04/14 职场文书
交通事故调解协议书
2014/04/16 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
商务英语求职信范文
2015/03/19 职场文书
法律进社区活动总结
2015/05/07 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python