微信小程序标准版统一封装wx.request请求，使用统一封装的class做请求数据笔记记录

先放一个正确的封装之后的成果：

/**
 * 微信小程序标准版：统一封装的 http 请求类
 */
class Http {
  /**
   * prefix of Http _get _post ...
   * @param baseUrl: string 
   */
  constructor(baseUrl = '') {
    if (typeof baseUrl !== 'string') {
      throw new Error('Http baseUrl must be a string');
    }
    if (baseUrl.TrimStr() == '') {
      throw new Error('Http baseUrl can not be empty');
    }
    this.baseUrl = baseUrl;
  }

  /**
   * api address
   * @param url: string 
   */
  checkUrl(url) {
    if (url.indexOf('://') == -1) {
      url = this.baseUrl + url
    }
    return url
  }

  /**
   * 统一的请求方法
   * @param{ url:'api 地址',data:'数据',header:'自定义请求头内容',loading:'是否显示请求 loading', ...others:'其他参数'}
   */
  http({
    url = '',
    data = {},
    header = {},
    loading = false,
    ...others
  } = {}) {
    return new Promise((resolve, reject) => {
      if (loading) {
        wx.showLoading({
          title: '加载中 ...',
          mask: true
        })
      }
      wx.request({
        url: this.checkUrl(url),
        data,
        header,
        ...others,
        success: (res) => {
          if (res.data.code_status === 0) {
            resolve(res.data);
          } else {
            reject(res.data.msg)
          }
        },
        fail: (err) => {
          wx.showToast({
            title: '网络错误，请稍后再试',
            icon: 'none'
          })
        },
        complete: () => {
          wx.hideLoading()
        }
      })
    })
  }
  /* 这里修改成箭头函数，里边的 this 指向不跟着调用者改变，指向的就是本身外层的 this 对象 */
  _get = (url, data, loading = false, header = {
    'Content-Type': 'application/json'
  }) => {
    return this.http({
      url,
      data,
      header,
      loading
    })
  }
  /* 这里修改成箭头函数，里边的 this 指向不跟着调用者改变，指向的就是本身外层的 this 对象 */
  _post = (url, data, loading = false, header = {
    'Content-Type': 'application/json'
  }) => {
    console.log(this)
    return this.http({
      url,
      data,
      header,
      method: 'post',
      loading
    })
  }

}

String.prototype.TrimStr = function () {
  return this.replace(/(^\s*)|(\s*$)/g, '');
}

export {
  Http
}

接下来看一下封装过程：

首先先封装一个 class 放入一个独立的文件内：utils/http.js

/**
 * 微信小程序标准版：统一封装的 http 请求类
 */
class Http {
  /**
   * prefix of Http _get _post ...
   * @param baseUrl: string 
   */
  constructor(baseUrl = '') {
    if (typeof baseUrl !== 'string') {
      throw new Error('Http baseUrl must be a string');
    }
    if (baseUrl.TrimStr() == '') {
      throw new Error('Http baseUrl can not be empty');
    }
    this.baseUrl = baseUrl;
  }

  /**
   * api address
   * @param url: string 
   */
  checkUrl(url) {
    if (url.indexOf('://') == -1) {
      url = this.baseUrl + url
    }
    return url
  }

  /**
   * 统一的请求方法
   * @param{ url:'api 地址',data:'数据',header:'自定义请求头内容',loading:'是否显示请求 loading', ...others:'其他参数'}
   */
  http({
    url = '',
    data = {},
    header = {},
    loading = false,
    ...others
  } = {}) {
    return new Promise((resolve, reject) => {
      if (loading) {
        wx.showLoading({
          title: '加载中 ...',
          mask: true
        })
      }
      wx.request({
        url: this.checkUrl(url),
        data,
        header,
        ...others,
        success: (res) => {
          if (res.data.code_status === 0) {
            resolve(res.data);
          } else {
            reject(res.data.msg)
          }
        },
        fail: (err) => {
          wx.showToast({
            title: '网络错误，请稍后再试',
            icon: 'none'
          })
        },
        complete: () => {
          wx.hideLoading()
        }
      })
    })
  }

  _get(url, data, loading = false, header = {
    'Content-Type': 'application/json'
  }) {
    return this.http({
      url,
      data,
      header,
      loading
    })
  }

  _post(url, data, loading = false, header = {
    'Content-Type': 'application/json'
  }){
    console.log(this)
    return this.http({
      url,
      data,
      header,
      method: 'post',
      loading
    })
  }

}

String.prototype.TrimStr = function () {
  return this.replace(/(^\s*)|(\s*$)/g, '');
}

export {Http}

在 app.js 内部引入并在 index.js 使用的时候发现了另外的问题：

import {Http} from './utils/http'
const baseUrl = 'https://mini.brecovered.cn/';
const $Http = new Http(baseUrl);
App({
  onLaunch: function () {
  },
  $Http:$Http, // 将 Http 本身也给 app 添加一个全局变量，但是使用它的话调用总是需要加上 $Http. 前缀，不喜欢，所以把下面两个也放进去
  _post:$Http._post, // _post 也注册上去
  _get:$Http._get // _get 也注册上去
})

在 index.js 使用：

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
  },
  onLoad: function () {
    app._post('aaa')
    .then(res=>{
      console.log(res)
    })
    .catch(err=>{
      console.log(err)
    })
  }
})

报了一个错：

可以看到，这个 this 是 app.js 里边的 App 对象，不是 Http 类，修改使用的请求，用 $Http._post

app.$Http._post('aaa')
   .then(res=>{
     console.log(res)
   })
   .catch(err=>{
     console.log(err)
   })

这时候看到请求是对的，http.js 内部的 _post 输出的 this 也是 Http 类本身，没问题。

这时候不得不提一嘴 javascript 的 function 内部 this 指向问题了，像这种的调用，内部 this 指向都是调用者，也就是 .(点)funcName 前边的对象，这里可以修改一下封装的 class ，index.js 里边的调用方式不变，还是直接 app._post(连带 app._get 一起修改):

/**
 * 微信小程序标准版：统一封装的 http 请求类
 */
class Http {
  /**
   * prefix of Http _get _post ...
   * @param baseUrl: string 
   */
  constructor(baseUrl = '') {
    if (typeof baseUrl !== 'string') {
      throw new Error('Http baseUrl must be a string');
    }
    if (baseUrl.TrimStr() == '') {
      throw new Error('Http baseUrl can not be empty');
    }
    this.baseUrl = baseUrl;
  }

  /**
   * api address
   * @param url: string 
   */
  checkUrl(url) {
    if (url.indexOf('://') == -1) {
      url = this.baseUrl + url
    }
    return url
  }

  /**
   * 统一的请求方法
   * @param{ url:'api 地址',data:'数据',header:'自定义请求头内容',loading:'是否显示请求 loading', ...others:'其他参数'}
   */
  http({
    url = '',
    data = {},
    header = {},
    loading = false,
    ...others
  } = {}) {
    return new Promise((resolve, reject) => {
      if (loading) {
        wx.showLoading({
          title: '加载中 ...',
          mask: true
        })
      }
      wx.request({
        url: this.checkUrl(url),
        data,
        header,
        ...others,
        success: (res) => {
          if (res.data.code_status === 0) {
            resolve(res.data);
          } else {
            reject(res.data.msg)
          }
        },
        fail: (err) => {
          wx.showToast({
            title: '网络错误，请稍后再试',
            icon: 'none'
          })
        },
        complete: () => {
          wx.hideLoading()
        }
      })
    })
  }
  /* 这里修改成箭头函数，里边的 this 指向不跟着调用者改变，指向的就是本身外层的 this 对象 */
  _get = (url, data, loading = false, header = {
    'Content-Type': 'application/json'
  }) => {
    return this.http({
      url,
      data,
      header,
      loading
    })
  }
  /* 这里修改成箭头函数，里边的 this 指向不跟着调用者改变，指向的就是本身外层的 this 对象 */
  _post = (url, data, loading = false, header = {
    'Content-Type': 'application/json'
  }) => {
    console.log(this)
    return this.http({
      url,
      data,
      header,
      method: 'post',
      loading
    })
  }

}

String.prototype.TrimStr = function () {
  return this.replace(/(^\s*)|(\s*$)/g, '');
}

export {
  Http
}

再次调用请求查看：

可以看到，输出的 this 就是当前的 class 对象，这样就没问题了