封装微信小程序请求方法wx.request()

最新推荐文章于 2026-05-07 10:27:18 发布

原创最新推荐文章于 2026-05-07 10:27:18 发布 · 731 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

微信小程序登录

本文介绍了如何在微信小程序中封装请求方法，通过创建request.js和api.js文件，实现GET、POST等请求的统一管理和简化调用。在request.js中定义了请求类，封装了各种HTTP方法，并在api.js中定义具体的接口调用。最后，在index.js中引用并调用了封装后的API进行数据获取。

前言发送请求的时候有好多需要重复写，请求地址改变的话需要一个一个的改，所以封装请求方法可以增加代码质量

一级标题

前言封装微信小程序请求方法wx.request()

一、在项目新建request.js（文件地址我放在了utils文件下）

request.js 如下（示例）：

class Request{
  get (url, data) {
    return this.request('GET', url, data)
  }
  post (url, data) {
    return this.request('POST', url, data)
  }
  put (url, data) {
    return this.request('PUT', url, data)
  }
  request (method, url, data) {
    const that = this
    return new Promise((resolve, reject) => {
      wx.request({
        url: that .baseURL + url ,
        data,
        method,
        success (res) {
          if (res.statusCode === 200) {
            resolve(res.data)
          } else {
            reject(res)
          }
        },
        fail (res) {
          reject({
            message: res.errMsg,
            url:that.baseURL + url,
            method,
            data,
            statusCode:res.statusCode,
            result:res.data
          })
        }
      })
    })
  }
}


const request = new Request({
  baseURL: 'https://****/' , // 请求后台地址
})

module.exports = request

二、在项目新建api.js（文件地址我放在了utils文件下）


import request from './request.js'
//引入request.js 文件
class Api {
    //请求方法
    getlist(data){
        return request.post('/wechat',data)
    }
}
const api = new Api()
export default api

三、在项目index.js文件引用

import api from '../../utils/api.js'
Page({
  data: {

  },
  onReady() {
  },
  onLaunch: function () {
  },
  onShow: function () {
  },
  onLoad() {
  },
  list() {
    api.getlist().then((res) => {
      console.log(res,)
    })
  },
})