前言

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

在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,}
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,'GET',args)
 wx.request(args)
}
function put(url,'PUT',args)
 wx.request(args)
}
function _delete(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上面，這樣你們看起來更直觀一些

總結

到此這篇關於全網小程式介面請求封裝例項的文章就介紹到這了,更多相關全網小程式介面請求封裝內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！