使用Promise对微信小程序wx.request请求方法进行封装,配有详细过程

采用Promise的方式来封装而不采用回调函数(callBack)的方式封装的主要好处是防止回调地狱等。。。

主要分为四个部分:

1、config.js文件,主要存放小程序的配置,例如请求的服务器地址

const config = {
    api_base_url: 'http://xx.xxx.xxx/',
    img_base_url: 'http://xx.xx.xx/'
}

export {config }

2、 http.js文件,request的封装主体

import {config} from '../config.js'

const tips = {
    1: '抱歉,出现了一个错误',
    2: '请先登录'
}

class HTTP{
    request({url,data={},method='GET'}){
        return new Promise((resolve, reject)=>{
            this._request(url,resolve,reject,data, method)
        })
    }
    _request(url,resolve, reject, data={}, method='GET'){
        wx.request({
            url:config.api_base_url + url,
            method:method,
            data:data,
            header:{
                'content-type':'application/json'
            },
            success:(res)=>{
                const code = res.statusCode.toString()
                if (code.startsWith('2')){ // 一般情况下正确的请求结果是以2开头的(200)
                    resolve(res.data)
                }
                else{
                    reject()
                    const error_code = res.data.error_code
                    this._show_error(error_code)
                }
            },
            fail:(err)=>{
                reject()
                this._show_error(1)
            }
        })
    }

    _show_error(error_code){
        if(!error_code){
            error_code = 1
        }
        const tip = tips[error_code]
        wx.showToast({
            title: tip?tip:tips[1],  // tips内没找到对应的错误代码时,使用1代替
            icon:'none',
            duration:2000
        }) 
    }

}

export {HTTP}

3、models/demo.js文件,请求参数的处理

import {
    HTTP
}
from '../util/http.js'

class DemoModel extends HTTP {
    getDemoList(param1, param2) {
        return this.request({
            url: 'xxx/xxx/getDemoList',
            method: 'POST',
            data: {
                param1,
                param2
            }
        })
    }
}

export {
    DemoModel
}

4、Pages/demo/demo.js文件,业务代码调用model内的getDemoList

import {
  DemoModel
} from '../../models/demo.js'

const demoModel = new DemoModel()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    demoList: [],
  },

  /**
   * 生命周期函数--监听页面加
   */
  onLoad: function (optins) {
    demoModel.getDemoList(param1, param2).then(res => {
      this.setData({ demoList:res })
    })
  }
})

 

你可能感兴趣的:(微信小程序)