微信小程序 封装http请求实例详解

简介

在微信小程序开发中，经常需要通过 HTTP 请求后端 API 来获取数据。为减少代码冗余并使功能模块化，我们可以将 HTTP 请求封装在可复用的模块中。减少重复代码的同时，也方便代码的维护和升级。

axios 库

针对HTTP请求处理，可以使用 axios 库，这是一个基于 Promise 的 HTTP 库，可运行在浏览器和 Node.js 适用于来自 API 的请求。
微信小程序中不能直接使用 axios 库，可以使用 mpvue-axios 库。

以下是 mpvue-axios 封装示例代码。

import axios from 'axios'
import qs from 'qs'
const isProduction = process.env.NODE_ENV === 'production'
const BASE_URL = isProduction ? 'https://api.acme.com' : 'http://localhost:8000'

export default class Http {
  constructor() {
    this.axios = axios
    this.axios.defaults.baseURL = BASE_URL
    this.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
  }

    http(config = {}) {
    config.method = config.method || 'GET'
    switch(config.method.toUpperCase()) {
      case 'GET':
        return this.get(config.url, config.data)
      case 'POST':
        return this.post(config.url, config.data)
      case 'PUT':
        return this.put(config.url, config.data)
      case 'DELETE':
        return this.delete(config.url, config.data)
      default:
        return Promise.reject(new Error(`Invalid http method: ${config.method.toUpperCase()}`))
    }
  }

  get(url, params) {
    return this.axios.get(url, {params})
  }

  post(url, data) {
    return this.axios.post(url, qs.stringify(data))
  }

  put(url, data) {
    return this.axios.put(url, qs.stringify(data))
  }

  delete(url, data) {
    return this.axios.delete(url, {data: qs.stringify(data)})
  }
}

在构造器中赋值 axios.defaults.baseURL 为后台 API 请求的 URL。通过配置指定 Content-Type: application/x-www-form-urlencoded 来解决后端处理 POST 请求参数时出现的 415 Unsupported Media Type 错误.

使用方法如下：

const http = new Http()
http.http({
  url: '/user/123',
  method: 'GET',
  data: {
    name: 'Jack',
    age: '18',
  }
}).then(res => {
  console.log(res.data)
}).catch(error => {
  console.error(error)
})

小程序 API

小程序自带了一个基于 Promise 的网络请求 API — wx.request，可以使用它来进行网络请求。

以下是封装wx.request示例代码。

const BASE_URL = 'http://localhost:8000'

export default class Http {
  constructor() {
    this.BASE_URL = BASE_URL
  }

  http(config = {}) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: this.BASE_URL + config.url,
        method: config.method || 'GET',
        data: config.data || {},
        header: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function (res) {
          resolve(res)
        },
        fail: function (error) {
          reject(error)
        }
      })
    })
  }
}

也可以通过类的静态方法 this.request 这种方式来进行请求。

const BASE_URL = 'http://localhost:8000'

export default class Http {
  constructor() {
    this.BASE_URL = BASE_URL
  }

  static request(config = {}) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: BASE_URL + config.url,
        method: config.method || 'GET',
        data: config.data || {},
        header: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function (res) {
          resolve(res)
        },
        fail: function (error) {
          reject(error)
        }
      })
    })
  }
}

使用方法与 axios 类似：

const http = new Http()
http.http({
  url: '/user/123',
  method: 'GET',
  data: {
    name: 'Jack',
    age: '18',
  }
}).then(res => {
  console.log(res.data)
}).catch(error => {
  console.error(error)
})

结论

对于微信小程序的 HTTP 请求，我们可以通过封装 Axios / wx.request 来实现模块化、重用的思想。无论选择哪种方式实现，都需要注意在传递参数的过程中注意控制参数的格式，防止出现 415/400 等异常。