全网小程序接口请求封装的
小程序开发教程今天在全网为大家介绍小程序接口请求封装的实例,快快围观。
在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.serverconst 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)
}
}// 获取接口请求回来的tokenfunction _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上面,这样你们看起来更直观一些
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbhgai
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24