小程序Promise二次封装wx.request

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

第一步

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

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

export { config }

第二步

在根目录中创建utils文件夹并在utils目录中创建http.js文件
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)
  })
}

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

欢迎关注支持，谢谢！