原生小程序封装请求及优雅调用接口的方法探究

why 766 2024-06-24

微信小程序如何封装原生请求？如何调用接口？下面本篇文章给大家介绍一下原生微信小程序封装请求，并优雅调用接口的方法，希望对大家有所帮助！

原生小程序如何封装请求，优雅地调用接口？

本文属于代码片段，对于原生微信小程序请求的封装。有个人书写习惯，仅供参考。

基于小程序原生request封装Promise风格的请求避免多级回调(回调地狱)对于网络请求错误统一处理分发

目录结构

1

2

3

4

5

6

7

.

├── api

│   ├── config.js // 相关请求的配置项,请求api等

│   ├── env.js // 环境配置

│   ├── request.js  // 封装主函数

│   ├── statusCode.js // 状态码

└── ...

相关代码

配置文件

env.js

1

2

3

4

5

// env.js

module.exports = {

  ENV: 'production',

  // ENV: 'test'

}

statusCode.js

1

2

3

4

5

6

// statusCode.js

// 配置一些常见的请求状态码

module.exports = {

  SUCCESS: 200,

  EXPIRE: 403

}

config.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

// config.js

const { ENV } = require('./env')

let BASEURL

 

switch (ENV) {

  case 'production':

    BASEURL = ''

    break

  case 'test':

    BASEURL = ''

    break

  default:

    BASEURL = ''

    break

}

module.exports = {

  BASEURL,// 项目接口地址，支持多域名

}

主函数

注意 64~68行是对token过期的处理,在调用登录的时候, 检查app.globalData中是否存在token,存在则不发起登录请求,token过期清空token,那么下一次请求的时候就会 重新发起登录请求从而会重新获取到新的token

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

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

// 引入状态码statusCode

const statusCode = require('./statusCode')

// 定义请求路径, BASEURL: 普通请求API; CBASEURL: 中台API,不使用中台可不引入CBASEURL

const { BASEURL } = require('./config')

// 定义默认参数

const defaultOptions = {

  data: {},

  ignoreToken: false,

  form: false,

}

/**

 * 发送请求

 * @params

 * method: <String> 请求方式: POST/GET

 * url: <String> 请求路径

 * data: <Object> 请求参数

 * ignoreToken: <Boolean> 是否忽略token验证

 * form: <Boolean> 是否使用formData请求

 */

function request (options) {

  let _options = Object.assign(defaultOptions, options)

  let { method, url, data, ignoreToken, form } = _options

  const app = getApp()

  // 设置请求头

  let header = {}

  if (form) {

    header = {

      &#39;content-type&#39;: &#39;application/x-www-form-urlencoded&#39;

    }

  } else {

    header = {

      &#39;content-type&#39;: &#39;application/json&#39; //自定义请求头信息

    }

  }

  if (!ignoreToken) {

    // 从全局变量中获取token

    let token = app.globalData.token

    header.Authorization = `Bearer ${token}`

  }

  return new Promise((resolve, reject) => {

    wx.request({

      url: BASEURL + url,

      data,

      header,

      method,

      success: (res) => {

        let { statusCode: code } = res

        if (code === statusCode.SUCCESS) {

          if (res.data.code !== 0) {

            // 统一处理请求错误

            showToast(res.data.errorMsg)

            reject(res.data)

            return

          }

          resolve(res.data)

        } else if (code === statusCode.EXPIRE) {

          app.globalData.token = &#39;&#39;

          showToast(`登录过期, 请重新刷新页面`)

          reject(res.data)

        } else {

          showToast(`请求错误${url}, CODE: ${code}`)

          reject(res.data)

        }

      },

      fail: (err) => {

        console.log(&#39;%c err&#39;, &#39;color: red;font-weight: bold&#39;, err)

        showToast(err.errMsg)

        reject(err)

      }

    })

  })

}

 

// 封装toast函数

function showToast (title, icon=&#39;none&#39;, duration=2500, mask=false) {

  wx.showToast({

    title: title || &#39;&#39;,

    icon,

    duration,

    mask

  });

}

 

function get (options) {

  return request({

    method: &#39;GET&#39;,

    ...options

  })

}

 

function post (options) {

  // url, data = {}, ignoreToken, form

  return request({

    method: &#39;POST&#39;,

    ...options

  })

}

 

module.exports = {

  request, get, post

}

使用方法

新建文件

新建api文件(此处以订单接口为例), 新建api/index.js(接口分发统一处理,防止接口写到同一个文件下过于冗长)
目录结构如下:

1

2

3

4

5

6

7

8

.

├── api

│   ├── config.js // 相关请求的配置项,请求api等

│   ├── index.js  // 统一处理入口

│   ├── order.js  // 订单接口

│   ├── request.js  // 封装主函数

│   ├── statusCode.js // 状态码

└── ...

引入request

1

2

3

4

5

6

7

8

9

10

// order.js

const request = require(&#39;./request&#39;)

 

module.exports = {

  // data可以传入 url, data, ignoreToken, form, cToken

  apiName (data) {

    let url = &#39;apiUrl&#39;

    return request.post({ url, data })

  }

}

统一分发接口

1

2

3

4

5

const orderApi = require("./order")

 

module.exports = {

  orderApi

}

页面引用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

const { orderApi } = require(&#39;dir/path/api/index&#39;)

...

1. `Promise.then()`链式调用

func () {

  orderApi.apiName(params).then(res => {

    // do Something

  }).catch(err => {

    // do Something

  })

}

 

2. `async/await` 调用

async func () {

  try {

    let res = await orderApi.apiName(params)

    // do Something

  } catch (err) {

    // do Something

  }

}

options取值

参数说明数据类型默认值
url接口名String''
data请求体Object{}
ignoreToken请求是否携带tokenBooleanfalse
form是否是表单请求Booleanfalse


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

标签：程序 方法 小程序 配置 代码
上一篇:微信小程序部署与上线的详细步骤及方法指引
下一篇:小程序中 reLaunch 跳转报错的解决思路与方法浅析
相关文章

 发表评论

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