快捷導(dǎo)航

全網(wǎng)小程序接口請(qǐng)求封裝實(shí)例代碼

更新時(shí)間：2020年11月06日 10:27:48 作者：sosojie

這篇文章主要給大家介紹了關(guān)于全網(wǎng)小程序接口請(qǐng)求封裝的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

這篇文章主要針對(duì)一些初學(xué)者，有寫(xiě)的不好的地方，還請(qǐng)大家多多諒解！

在utils文件夾里面新建兩個(gè)js文件，一個(gè)是api.js、一個(gè)就是requtil.js

api.js

這個(gè)文件主要api接口,廢話不多說(shuō)直接上代碼了

const request = require('requtil.js')
/*Apis 把全部api都存在這里*/
const Apis = { 
 /* 用戶相關(guān) */
 'login': '/devicecenter/auth/weChtLoin',
 'bindUser': '/devicecenter/user/userBindinOpenId',
 'genQrCode': '/devicecenter/user/getUserRcode',
 
 /* 設(shè)備相關(guān) */
 'getDeviceList': '/minipro/group/getDl', // 獲取設(shè)備列表
 'getDeviceAdd': '/minipro/group/addDl', // 添加設(shè)備
 'getDeviceDtl': '/minipro/group/delDl', // 刪除設(shè)備
}
/* 定義請(qǐng)求方法 */
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請(qǐng)求進(jìn)行分開(kāi)封裝

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)
 }
}
// 處理接口參數(shù)方法
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) {
  // 無(wú)任何操作
 } 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('請(qǐng)求失敗405：\n服務(wù)器返回失敗')
 } else if(status == 404) {
  util.errorMsg('請(qǐng)求失敗404：\n找不到接口')
 }
 if(callback) callback(rs.data)
 }
}

function fail(callback) {
 return function(rs) {
 console.log(rs)
 if(callback) callback(rs)
 }
}
// 獲取接口請(qǐng)求回來(lái)的token
function _setToken(tk) {
 token = tk
 wx.setStorageSync('token', token)
}

頁(yè)面怎么調(diào)用

在全局的app.js里面

import api from './utils/apis.js';
App({
	api: api,
})

index頁(yè)面

通過(guò)getApp()獲取api接口，自定義一個(gè)函數(shù)里面用到了promise方法獲取數(shù)據(jù)，然后在getDevList調(diào)用getChatRecord方法，就可以數(shù)據(jù)賦值

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)
 }
 })
}
// 設(shè)備列表請(qǐng)求接口
getChatRecord (params = {}) {
 return new Promise((resolve, reject) => {
 APP.api.getDeviceList({
  success: res => {
  resolve(res)
  }
 })
 })
},

后期我會(huì)做一個(gè)demo出來(lái)，放到github上面，這樣你們看起來(lái)更直觀一些

總結(jié)

到此這篇關(guān)于全網(wǎng)小程序接口請(qǐng)求封裝實(shí)例的文章就介紹到這了,更多相關(guān)全網(wǎng)小程序接口請(qǐng)求封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: