全網介紹小程式介面請求封裝的實例

小程式開發教學今天在全網為大家介紹小程式介面請求封裝的實例，快快圍觀。

這篇文章主要針對一些初學者，有寫的不好的地方，還請大家多多諒解！

在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上面，這樣你們看起來更直觀一些

相關免費學習推薦：小程式開發教學

以上是全網介紹小程式介面請求封裝的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！