您好,欢迎访问一九零五行业门户网

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

小程序开发教程今天在全网为大家介绍小程序接口请求封装的实例,快快围观。
这篇文章主要针对一些初学者,有写的不好的地方,还请大家多多谅解!
在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上面,这样你们看起来更直观一些
相关免费学习推荐:小程序开发教程
以上就是全网介绍小程序接口请求封装的实例的详细内容。
其它类似信息

推荐信息