回調函數封裝http之調用

1、建立http.js

檔案路徑：miniprogram\utils\http.js
           

内容：
import {config} from '../config.js'

const tips = {
  1: '抱歉,出現了錯誤'
}

class HTTP{
   request(params){
     if(!params.method){
       params.method ="GET"
     }
     wx.request({
      url: config.api_base_url+params.url,
       method: params.method,
       header: params.header,
       data: params.data,
       success:(res)=>{
         let code = res.statusCode.toString()
         //請求傳回狀态首字為2的表示成功;
         if(code.startsWith('2')){
           //如果params有success不為空，則執行後面的語句;
           params.success && params.success(res.data)
         }
         else{
           let error_code = res.data.error_code
           this._show_error(error_code)
         }
       },
       fail:(err)=>{
          this._show_error(1)
       }    
     })
   } // end request;

   //錯誤提示
   _show_error(error_code){
     if(!error_code){
       error_code =1
     }
     const tip = tips[error_code]
     wx.showToast({
       title: tip?tip:tips[1],
       icon: 'none',
       duration: 2000
     })
   }
}
export {HTTP}
           

2、封裝業務邏輯之models

檔案路徑：miniprogram\models\init.js
           

檔案内容：
import { HTTP } from '../utils/http.js'

class FirstModel extends HTTP {
  //傳遞的參數為回調函數
  getAreas(sCallback){
    let store = wx.getStorageSync("AREA")
    if(!store)
    {
      this.request({
        url: '/domain/',
        success: (res) => {
          sCallback(res)
          wx.setStorageSync("AREA", res)
        }
      })
    }
    else
    {
      sCallback(store)
    }
  } // getArea end;

  //首頁根據會議地擷取相應會議室資訊;
  getDefaultRoom(fun_callback,area){
     this.request({
       url: '/mee?area=' + area,
       success: (res)=>{
         fun_callback(res)
       }
     })
  }

  //根據會議地擷取相應會議室清單;
  getRoom_ByArea(fun_callback,area){
     this.request({
       url: '/room/?area=' + area,
       success: (res)=>{
         fun_callback(res)
       }
     })
  }

  //擷取部分資訊
  getDeparts(fun_callback){
    let store = wx.getStorageSync("DEPART")
    if(!store)
    {
      this.request({
        url: '/depart/',
        success: (res) => {
          fun_callback(res)
          wx.setStorageSync("DEPART", res)
        }
      })
    }
    else
    {
      fun_callback(store)
    }
  }
} // class end ;

export { FirstModel}
           

3、回調函數在小程式js的應用

3.1 引入檔案

import { FirstModel } from '../../models/Init.js'
           

3.2 執行個體化對象

const firstModel = new FirstModel()
           

3.3 回調函數應用

//資料背景初始化資料;
  //ES6文法
  initAreas(){
    firstModel.getAreas(res=>{
      res.forEach((item)=>{
        this.setData({
          areas: this.data.areas.concat(item.area)
        })
      })
    })
  },
           

//根據會議地+會議室+月份擷取資料
  getmeetlist(v_area,v_room,v_month){
    var that = this
    that.setData({
      items: []
    })
    //優化代碼，使用擴充運算符，使代碼優雅簡潔
    meetModel.getmeetlist(res =>{
      this.setData({
        items: this.data.items.concat(...res),
        isTouchMove: false
      })
    }, v_area, v_room, v_month)
  },