[微信小程序]封装HTTP

好记性不如烂笔头

网络请求是小程序中必不可少的一部分，而且使用频率也很高，虽然小程序提供的网络请求组件已经封装的很方便，但还是有必要根据业务具体封装一下，还是那一句话：不轻视任何一个知识点！

一、 响应式

1. 封装

① 创建http.js文件， 定义HTTP类
② 定义公用请求方法
③ 导出当前类

http.js文件，这是我根据我后台的逻辑封装的响应式HTTP请求工具
我后台的规则是000000代表请求成功，000005代表token失效需要重新登录

class HTTP {
  request(params) {
    if (!params.method) {
      params.method = 'GET'
    }
    wx.request({
      url: '主网址' + params.url,
      method: params.method,
      data: params.data,
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        let code = res.data.resp_code.toString()
        if (code == '000000') {
          params.success && params.success(res.data)
        }else if (code == '000005') {
          this. _showToast('token失效，请重新登录')
        }else {
          let msg = res.data.resp_message
          this._showToast(msg)
        }
      },
      fail: (err) => {
        this._showToast('请求出错，请稍后重试')
      }
    })
  }

  _showToast(title) {
    wx.showToast({
      title: title,
      icon: 'none',
      duration: 2000
    })
  }
}

export {HTTP}

2. 调用

① 引入封装好的HTTP工具类
② 声明HTTP
③ 请求数据

import {
  HTTP
} from '../util/http.js'

const http = new HTTP()
// GET
http.request({
      url: '',
      success: (res) => {
        // res 后台返回的数据
      }
})

//POST
http.request({
      url: '',
      method: 'POST',
      data: {
        art_id: '',
        type: ''
      },
      success: (res) => {
         // res 后台返回的数据
      }
})

3. 再封装

可以根据具体的业务逻辑对HTTP工具进行再一次的封装，简化请求的调用，使得业务逻辑更加的清晰。比如我要获取图书信息，以下是bookModel.js文件代码，所有和图书相关的请求方法都可以封装在这个文件中

①创建js文件，比如bookModel.js，并引入HTTP
②定义类，比如BookModel，并继承定义的HTTP类，方便调用HTTP请求方法
③获取对应数据，并回调出去
④导出当前类

import {
  HTTP
} from '../util/http.js'

class BookModel extends HTTP {
  // 获取图书信息
  getBookInfo(sCallback) {
    this.request({
      url: '',
      method: 'POST',
      data: {
        id: '',
        type: ''
      },
      success: (res) => {
        sCallback(res)
      }
    })
  }

}

export { BookModel }

调用的时候只需要引入BookModel并声明，直接调用getBookInfo即可

import {
  BookModel
} from '../../models/bookModel.js'

let bookModel = new BookModel()

// 获取图书信息
bookModel.getBookInfo((res) => {
  // res 获取到的数据
})

二、Promise链式

Promise是以另一种方式封装HTTP请求，这种方式可以很好的解决回调地狱问题，即请求回调嵌套请求的问题，废话不多说，直接上代码

1. 封装

http-p.js文件

class HTTP {

  request({url, data = {}, method = 'GET'}) {
    return new Promise((resolve, reject) => {
      this._request(url, resolve, reject, data, method)
    })
  }

  _request(url, resolve, reject, data, method) {
    wx.request({
      url: '主网址' +url,
      method: method,
      data: data,
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        let code = res.data.resp_code.toString()
        if (code == '000000') {
          resolve(res.data)
        }else if (code == '000005') {
          reject()
          this. _showToast('token失效，请重新登录')
        }else {
          reject()
          let msg = res.data.resp_message
          this._showToast(msg)
        }
      },
      fail: (err) => {
        reject()
        this._showToast('请求出错，请稍后重试')
      }
    })
  }

  _showToast(title) {
    wx.showToast({
      title: title,
      icon: 'none',
      duration: 2000
    })
  }
}

export { HTTP }

2. 再封装

bookModel.js文件代码

import {
  HTTP
} from '../util/http-p.js'

class BookModel extends HTTP {

  // 获取图书信息1
  getBookInfo1() {
    return this.request({
      url: '',
      method: 'POST',
      data: {
        id: ''
      }
    })
  }
  
  // 获取图书信息2
  getBookInfo2() {
    return this.request({
      url: '',
      method: 'POST',
      data: {
        id: ''
      }
    })
  }
}

export { BookModel }

3.调用

import {
  BookModel
} from '../../models/bookModel.js'

let bookModel = new BookModel()

// 获取图书信息1
const info1 = bookModel.getBookInfo1()
const info2 = bookModel.getBookInfo2()
info1.then(res => {
  // res 获取到的图书信息1的数据
})
info2.then(res => {
  // res 获取到的图书信息2的数据
})

// 获取图书信息1后获取图书信息2
Promise.all([info1, info2]).then(res => {
  // res[0] 图书信息1的数据
  // res[1] 图书信息2的数据
})