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

最新推荐文章于 2024-08-28 10:31:14 发布

scorpio_h

最新推荐文章于 2024-08-28 10:31:14 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/scorpio_h/article/details/84192832

微信小程序专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用Promise封装小程序网络请求的方法，避免了回调地狱的问题，详细展示了从配置到业务调用的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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