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


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的几种方法小结
Apr 25 Javascript
jQuery插件开发全解析
Oct 10 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
微信小程序实现自定义动画弹框/提示框的方法实例
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文件操作详解
2016/12/30 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
python二叉树遍历的实现方法
2013/11/21 Python
python求pi的方法
2014/10/08 Python
Python的动态重新封装的教程
2015/04/11 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python tkinter canvas使用实例
2019/11/04 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
初学者学习Python好还是Java好
2020/05/26 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
Python Selenium库的基本使用教程
2021/01/04 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
高级护理专业大学生求职信
2013/10/24 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
实习科室评语
2015/01/04 职场文书
24年收藏2000多部退役军用电台
2022/02/18 无线电
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
浅谈Node的内存泄露问题
2022/05/06 NodeJs