小程序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文件里直接调用就行了

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)
    })
  }

这样我们接口就更加的便于管理、维护了

小伙伴们看完记得点个小心心