自学微信小程序从零到一项目构建后的 HTTP 请求封装技巧

why 652 2024-07-15

一、http模块分装

首先我们为什么要去分装微信的http模块呢,我们先看一下微信自带的http请求它的一个写法

1

2

3

4

5

6

7

8

9

10

11

12

wx.request({

  url: 'test.php', //仅为示例,并非真实的接口地址

  data: {

    x: '',

    y: ''

  },

  header: {    'content-type': 'application/json' // 默认值

  },

  success (res) {

    console.log(res.data)

  }

})

这种请求方式呢类似我们古老的jquery方式的分装,我们需要在success的回调函数里面做一些业务操作,这种方式会形成我们的回调地狱问题,同时代码也不够直观,以及代码过于繁琐;

接下来我会通过promise的这种方式对于代码进行分装,将请求方式做一些简化

一、项目目录构建

image.png

在utils目录下边创建request.js文件,去做http请求封装,我们是通过promise这种方式进行封装,这样有利于我们对于错误的处理,也可以很直观的查看业务逻辑,封装示例代码如下:

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

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

/**

 *

 * @param {String} url

 * @param {Object} data

 * @param {String} method

 * @param {String} header

 */

function request(url, data={}, method='GET', header="Content-Type: application/json",) {

    return new Promise(function (resolve, reject) {

        wx.request({

            url: url,

            data: data,

            header: header,

            method: method,

            dataType: 'json',

            responseType: 'text',

            success: (res)=>{

                if(res.statusCode === 200) {

                    if (res.data.code === 200) {

                        resolve(res.data)

                    } else {

                        wx.showToast({

                            title: res.data.msg,

                            icon: 'none',

                            image: '',

                            duration: 1500,

                            mask: false,

                            success: (result)=>{

                                resolve(res.data);

                            },

                        });

                    }

                } else {

                    

                }

            },

            fail: (res)=>{

                // 需要我们加上统一的错误处理代码

                reject(res)

            },

            complete: ()=>{}

        });

    })

}

 

// 封装方法

// 如果对于header有什么特殊的要求,可以在请求参数里面做一些添加,例如后续我们会在headder中加入我们的sessionkey这些内容

// header = {}里面添加header内容

// 这块是一个简版的说明

const header = {

    "Content-Type": "application/json",

    // 这个token是微信登录以后,将token存入在缓存中

    "token": "*****************"

}

 

const get = function(url, data, header) {

    return request(url, data, 'GET', header);

}

 

const post = function(url, data, header) {

    return request(url, data, 'POST', header);

}

 

const del = function(url, data, header) {

    return request(url, data, '', header);

}

 

 

module.exports = {

    get,

    post,

    del,

}

二、项目中请求的使用

首先我们在使用的位置引入我们封装好的http模块

1

import webHttp from './utils/request';

接下里我们可以使用我们封装好的webhttp工具,比之前直接用微信的request请求方式代码量降低,同时链式方式使得逻辑更加清晰

1

2

3

4

5

6

webHttp.get(api.user.info, {

    // nick_name:

    ...self.globalData.userInfo

}).then((res) => {

    console.log(res);

})

大概上是这样的一个过程,实际过程中可能根据后端restful api的方式需要对封装继续完善,同样是对于post请求的data参数也有不同的处理,这个需要按照实际情况做出相应的调整,如果本篇文章有帮助到你,欢迎收藏点赞,同样有什么地方有更好的方式欢迎交流,进步永不停息。


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

上一篇:掌握 Vue 技术能否用于编写小程序的探讨
下一篇:微信小程序利用一个 JSON 实现分享朋友圈图片的方法
相关文章

 发表评论

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