[微信小程序] 封装HTTP 收藏

【W_wang】

11月19日 17:23 浏览量:87


好记性不如烂笔头

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

一、 响应式

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()// GEThttp.request({
      url: '',
      success: (res) => {
        // res 后台返回的数据
      }})//POSThttp.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
  getBookInfo1() {
    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的数据
  })




作者:心丶语
链接:https://www.jianshu.com/p/c6d0f4f0ddc5
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


发表评论

热门推荐

福利

请使用高版本浏览器...

登录

X

    张三 X

    聊天记录

    发送