全网介绍小程序接口请求封装的实例

互联网 20-10-14

小程序开发教程今天在全网为大家介绍小程序接口请求封装的实例，快快围观。

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

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