微信小程序开发之——网络请求封装

发表于 分类于 ， ， 阅读时长 ≈ 4 分钟

一 概述

  • 网络请求地址放到url.js中，分别制定开发环境，体验环境，线上环境
  • 网络请求的方法放到request.js中，暴露get、post、upload方法
  • 请求前显示加载中，请求结束后隐藏加载中
  • 请求的接口方法，放到api.js中，并调用request.js中对应的方法

二 请求方法封装

2.1 请求地址(url.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  //开发环境
  develop: {
    BASE_URL: "http://localhost:3000/", //本地
  },
  //体检环境
  trial: {
    BASE_URL: "http://localhost:3000/", //体验版
  },
  //线上环境
  release: {
    BASE_URL: "http://localhost:3000/", //本地
  }
}

2.2 请求方法的封装(request.js)

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
const {
  develop,
  trial,
  release
} = require('./url.js');

/**
 * GET请求封装
 */
function get(url, headers = {}, data = {}) {
  return request(url, 'GET', headers, data)
}

/**
 * POST请求封装
 */
function post(url, headers = {}, data = {}) {
  return request(url, 'POST', headers, data)
}
/**
 * @description 上传文件
 * @param {*} url 请求地址
 * @param {*} data 参数
 */
function upLoad(url, headers = {}, data = {}) {
  return uploadFile(url, 'POST', headers, data)
}

/**
 */
function request(url, method = "GET", headers = {}, data = {}) {
  var contentType = method == 'GET' ? 'application/json' : 'application/x-www-form-urlencoded'
  wx.showLoading({
    title: '努力加载中'
  })
  return new Promise(function (resolve, reject) {
    wx.request({
      url: develop.BASE_URL + url,
      data: data,
      method: method,
      header: {
        'content-Type': contentType,
        'token': wx.getStorageSync('token')
      },
      success: function (res) {
        wx.hideLoading()
        // console.log(res)
        switch (res.statusCode) {
          case 200: //请求成功
            resolve(res.data);
            break;
          default: //请求失败
            reject(res.data)
            wx.clearStorage();
            wx.navigateTo({
              url: '/pages/login/login',
            })
            break;
        }
      },
      fail: function (err) {
        //服务器连接异常
        wx.hideLoading()
        reject(err, "服务器连接异常，请检查网络再试")
      }
    })
  });
}
/**
 * 微信的uploadFile
 */
function uploadFile(url, method = "POST", data = {}) {
  return new Promise(function (resolve, reject) {
    wx.uploadFile({
      url: develop.BASE_URL + url,
      filePath: data.filePath,
      file: data.filePath,
      name: 'file',
      header: {
        'token': wx.getStorageSync('token'),
      },
      formData: {
        "userNo": wx.getStorageSync('userno'),
        "organId": wx.getStorageSync('organId'),
      },
      success: function (res) {
        // console.log(res)
        if (res.statusCode == 200) {
          try {
            var resString = res.data
            var res = JSON.parse(resString);
            var data = res.data;
            console.log(res.code);
            console.log(1);
            switch (res.code) {
              case 20000: // 请求成功处理
                resolve(data);
                break;
                // case 20001: //参数为空
                // case 20002: //数据验证错误
                // case 20005: //没有可用的数据库
                // case 20006: //该用户未登录
                // case 20007: //上传视频不存在
                // case 20008: //请确认文件完整性
                // case 20009: //程序异常
              case 20003: // 20003 //您没有权限访问，请获取系统权限
              case 20004: // 20004 权限失效或token过期
                wx.removeStorageSync('token')
                wx.removeStorageSync('userno')
                wx.navigateTo({
                  url: '/pages/login/login',
                })
                reject(data)
                break;
              default:
                reject(data)
                break;
            }
          } catch (error) {
            reject("数据获取失败")
          }
        } else {
          reject("请求失败：", res)
        }
      },
      fail: function (err) {
        //服务器连接异常
        reject(err, "服务器连接异常，请检查网络再试")
      }
    })
  });
}

module.exports = {
  request,
  get,
  post,
  upLoad,
}

2.3 具体的请求方法(api.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {
  get,
  post,
  upLoad
} from './request.js';

function getPhoneCode(headers, data) {
 return get("getPhoneCode", headers, data)
}
function Login(headers,data){
  return post("Login",headers,data);
}

export default {
  getPhoneCode,
  Login
}

三 示例

3.1 get请求示例

3.1.1 界面

1
2
<button type="primary" bindtap="getPhoneCode">网络请求-getPhoneCode</button>
<text>{{phoneCodeResult}}</text>

3.1.2 请求逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
getPhoneCode() {
    http.getPhoneCode({}, {}).then(res => {
      console.log(res);
      this.setData({
        phoneCodeResult: JSON.stringify(res)
      })
      console.log(1);
    }).catch(error => {
      this.setData({
        phoneCodeResult: JSON.stringify(res)
      })
      console.log(error);
      console.log(1);
    })
  },

3.1.3 请求结果

3.2 post请求示例

3.2.1 界面

1
2
<button type="primary" bindtap="login">网络请求-Login</button>
<text>{{loginResult}}</text>

3.2.2 请求逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
login() {
  http.Login({
    "username": "test",
    "password": 123456
  }, {}).then(res => {
    console.log(1);
    console.log(res);
    this.setData({
      loginResult: JSON.stringify(res)
    })
  }).catch(res => {
    this.setData({
      loginResult: JSON.stringify(res)
    })
    console.log(res);
    console.log(1);
  })
}

3.2.3 效果图

四 参考代码

  • CSDN下载-示例代码