小程序Promise二次封装wx.request

在开发项目过大时，太多的接口如果不进行封装的话会很难以管理，今天就来说一下怎么通过Promise进行二次封装wx.request

第一步
在根目录中创建config.js文件，把我们接口的前缀放在里面（不要忘记导出）

const config = {
  loginUrl: 'https://www.*****.com',
  url: 'https://www.*****.com'
}

export { config }

第二部
在目录中utils目录中创建http.js文件

代码如下：

import { config } from '../config.js'
class HTTP {
  request(params) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: config._url + params.url,
        method: params.method || 'GET',
        data: params.data || null,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: res => {
          resolve(res)
        },
        fail: err => {
          reject(err)
        }
      })
    })
  }
export { HTTP }

第三步
再次给接口分类，在根目录下创建models文件夹，models里将不同页面的不同接口进行分类例如，public.js公共接口、index.js首页需要用的接口

上面index.js分类

import { HTTP } from '../utils/http.js'
const _HTTP = new HTTP()

class IndexModel {
  // 商铺列表
  dataList (page, rows) {
    return _HTTP.request({
      method: 'POST',
      url: '/***',
      data: {
        page,
        rows
      }
    })
  }
  // 商铺详情
  dataDetail (id) {
    return _HTTP.request({
      method: 'POST',
      url: '/***',
      data: {
        id
      }
    })
  }
export default IndexModel

第四步
在需要使用的js文件内直接调用就OK了/

import IndexModel from '../../models/index.js'
let _index = new IndexModel()

例如在onLoad生命周期里使用我们前面封装的接口

  //生命周期函数--监听页面加载
  onLoad: function (options) {
    // 商铺列表
    _index.dataList('2', '10').then(res => {
      console.log(res)
    })
    // 商铺详情
    _index.dataDetail('136').then(res => {
      console.log(res)
    })
  }

这种方法更利于我们后面的维护和管理

欢迎关注支持，谢谢！