微信小程序的wx.request的简单封装_(2)wx.request有什么作用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53944118/article/details/114918751

本文介绍了一种在微信小程序中封装API的方法，通过创建utils文件夹下的request.js和api.js文件来实现对wx.request的封装，提高代码复用性和可维护性。

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

1、为什么要封装wx.request

封装wx.requset可以更有效的管理后台接口，更改更方便，更有利于项目的维护

2、首先在utils文件夹中创建一个request.js文件，用来封装wx.request

如图：
在这里插入图片描述
在request文件中封装如下代码：

const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    wx.showLoading({
      title: '加载中',
    })
    wx.request({
      url: url,
      data: data,
      method: method,
      header: {
        'content-type': 'application/json'
      },
      //请求成功的操作
      success: (res) => {
        resolve(res.data)
        wx.hideLoading()
      },
      //请求失败的操作
      fail: (err) => {
        reject('网络请求失败',err)
        wx.hideLoading();
        wx.showModal({
          title: '提示',
          content: '网络请求失败',
          showCancel: false
        })
      }
    })
  })
}
module.exports = request

3、在utils文件夹中创建一个api.js文件，用来封装需要用到接口

在这里插入图片描述

在api.js文件中

const request = require('./request')
function banner(){
	//url:路径
	//method:请求方式
	//data:参数
	return request(url,method,data)
}
module.exports = {}

4、在要使用的页面的js文件里引入并使用这个方法就可以了

例如：

let { request } = require('./request.js')
// 首页轮播图
function banner() {
  return request('/banner/list', 'GET')
}
module.exports = {
  banner
}

这样就可以了