首页 >> js开发 >> js全网小程序接口请求封装实例代码js大全
js全网小程序接口请求封装实例代码js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
前言前言前言这篇文章主要针对一些初学者，有写的不好的地方，还请大家多多谅解！在utils文件夹里面新建两个js文件，一个是api.js、一个就是requtil.jsapi.jsapi.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
}
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.jsrequtil.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)
}
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里面在全局的app.js里面
import api from './utils/apis.js';
App({
api: api,
})
import api from './utils/apis.js';
App({
api: api,
})
index页面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)
}
})
})
},
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上面，这样你们看起来更直观一些总结总结总结
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
}
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.jsrequtil.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)
}
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里面在全局的app.js里面
import api from './utils/apis.js';
App({
api: api,
})
import api from './utils/apis.js';
App({
api: api,
})
index页面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)
}
})
})
},
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上面，这样你们看起来更直观一些总结总结总结
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
