全网范围内小程序接口请求封装的实例详细介绍

why 253 2024-07-05

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

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

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

在utils文件夹里面新建两个js文件,一个是api.js、一个就是requtil.js

api.js

这个文件主要api接口,废话不多说直接上代码了

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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请求进行分开封装

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

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里面

1

2

3

import api from './utils/apis.js';

App({    api: api,

})复制代码

index页面

通过getApp()获取api接口,自定义一个函数里面用到了promise方法获取数据,然后在getDevList调用getChatRecord方法,就可以数据赋值

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序开发中常见的踩坑记录与分析
下一篇:网易云音乐宇宙尘埃特效的欲罢不能式实现方法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~