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

前言

这篇文章主要针对一些初学者，有写的不好的地方，还请大家多多谅解！

在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上面，这样你们看起来更直观一些

总结