微信小程序HTTP请求从0到1封装

在微信小程序中，我们经常需要通过HTTP请求从后端获取数据。为了让代码更加规范、易于维护，我们可以把HTTP请求封装成一个类，然后在具体页面中调用这个类的方法来发送请求。接下来就让我们从0到1来学习微信小程序HTTP请求的封装方法。

准备工作

创建一个utils目录，并在该目录下创建一个http.js文件。
在app.js中引入封装好的http模块，并把它挂载到全局变量中。具体代码如下：

// app.js
const Http = require('./utils/http.js')
App({
  globalData: {
    http: new Http()
  }
})

发送GET请求

我们首先来实现一个发送GET请求的方法。

class Http {
  constructor() {
    this.baseUrl = 'http://localhost:3000'
  }

  request(params) {
    wx.request({
      url: this.baseUrl + params.url,
      method: params.method || 'GET',
      data: params.data || {},
      success: (res) => {
        params.success && params.success(res.data)
      },
      fail: (err) => {
        params.fail && params.fail(err)
      }
    })
  }

  get(url, data, success, fail) {
    this.request({
      url: url,
      data: data,
      success: success,
      fail: fail
    })
  }
}

我们首先定义了一个Http类，它有一个baseUrl属性，用来存储API的基础URL。然后我们定义了一个request方法，它负责实际发送网络请求。最后我们定义了一个get方法，它调用了request方法，并传入参数。get方法的参数分别为url、data、success和fail，分别对应HTTP请求的URL、查询参数、成功回调和失败回调。

现在我们可以在具体的页面中使用get方法来发送GET请求。例如，我们要从服务器获取一些用户信息，代码如下：

const app = getApp()

Page({
  onLoad() {
    app.globalData.http.get('/users', {name: '张三'}, (res) => {
      console.log(res)
    }, (err) => {
      console.error(err)
    })
  }
})

上面的代码中，我们首先用getApp()函数获取小程序实例，然后通过globalData获取到我们在app.js中挂在到全局变量上的http模块。接着我们就可以使用get方法来发送GET请求了。get方法的第一个参数为请求URL，第二个参数为查询参数，第三个参数为请求成功后的回调函数，第四个参数为请求失败后的回调函数。

发送POST请求

现在我们来实现一个发送POST请求的方法。

class Http {
  // ...

  post(url, data, success, fail) {
    this.request({
      url: url,
      method: 'POST',
      data: data,
      success: success,
      fail: fail
    })
  }
}

我们只需要在get方法的基础上稍做修改即可。我们只需要修改请求方法为 POST 并将 data 作为 POST 请求参数即可。例如，我们要向服务器上传一张图片，代码如下：

const app = getApp()

Page({
  // ...

  uploadImage() {
    wx.chooseImage({
      success: (res) => {
        const tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: app.globalData.http.baseUrl + '/images',
          filePath: tempFilePaths[0],
          name: 'image',
          success: (res) => {
            console.log(res.data)
          },
          fail: (err) => {
            console.error(err)
          }
        })
      },
    })
  }
})

在上面的代码中，我们首先调用了wx.chooseImage函数，让用户选择一张图片。然后我们调用wx.uploadFile函数来上传图片。其中url参数为请求URL，filePath参数为图片路径，name参数为表单字段名。上传成功后，我们可以通过回调函数来处理服务器返回的数据。