在開發(fā)項目過大時，太多的接口如果不進行封裝的話會很難以管理，今天就來說一下怎么通過Promise進行二次封裝wx.request

第一步

在根目錄中創(chuàng)建config.js文件，把我們接口的前綴放在里面（不要忘記導(dǎo)出）
config.js代碼如下：

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

export { config }

第二步

在根目錄中創(chuàng)建utils文件夾并在utils目錄中創(chuàng)建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 }

第三步

再次給接口分類，在根目錄下創(chuàng)建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

第四步

在對應(yīng)的js文件中直接調(diào)用就ok

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

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

//生命周期函數(shù)--監(jiān)聽頁面加載
onLoad: function (options) {
  // 商鋪列表
  _index.dataList('2', '10').then(res => {
    console.log(res)
  })
  // 商鋪詳情
  _index.dataDetail('136').then(res => {
    console.log(res)
  })
}

這種方法更利于我們后面的維護和管理

歡迎關(guān)注支持，謝謝！