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


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文件的小脚本
Jun 28 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
JavaScript图片旋转效果实现方法详解
Jun 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
thinkPHP实现表单自动验证
2014/12/24 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
php轻松实现文件上传功能
2016/03/03 PHP
php单例模式的简单实现方法
2016/06/10 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
Python温度转换实例分析
2018/01/17 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
详解python算法之冒泡排序
2019/03/05 Python
Python下简易的单例模式详解
2019/04/08 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
关于召开会议的通知
2015/04/15 职场文书
数学备课组工作总结
2015/08/12 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS