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


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 相关文章推荐
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
JavaScript实现简单动态表格
Dec 02 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
PHP4实际应用经验篇(3)
2006/10/09 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
JQuery优缺点分析说明
2011/04/10 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python Socket使用实例
2017/12/18 Python
python unittest实现api自动化测试
2018/04/04 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
wxPython实现文本框基础组件
2019/11/18 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
小学教师岗位职责
2013/11/25 职场文书
一年级学生期末评语
2014/04/21 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
学习计划书怎么写
2014/09/15 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
云冈石窟导游词
2015/02/04 职场文书
电气工程师岗位职责
2015/02/12 职场文书
2015年招生工作总结
2015/05/04 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS