微信小程序 wx.request二次封装

封装了 wx.request 函数,使得发送网络请求更加简便和易用。同时,在请求过程中做了一些错误处理和加载提示的操作,提升了用户体验。

在utils文件下创建request.js的文件

javascript 复制代码
// request请求
// 引入env中的url
import env from './env.js';
//在这里添加我们的专业域名

const app = getApp()
let loadingCount = 0
console.log(env.baseUrl, "baseUrl")
module.exports = {
  /**
 * url:请求的接口地址
 * method:请求方式 GET,POST....
 *  data:要传递的参数
 * showLoading 接口请求时是否显示loading,默认展示
   */
  request: (url, data, method, showLoading = true) => {

    let _url = `${env.baseUrl}${url}`;
    let tokenData = {}
    if (app && app.globalData.token) {
      tokenData = {
        Authorization: app.globalData.token
      }
    }
    return new Promise((resolve, reject) => {


      if (loadingCount == 0 && showLoading) {
        wx.showLoading({
          title: '正在加载',
          mask: true
        });
      }
      loadingCount++;
      wx.request({
        url: _url,
        data: {
          ...data
        },
        method: method || 'GET',
        header: {
          'content-type': 'application/json',
          ...tokenData
        },
        success: (res) => {
          let {
            code
          } = res.data;
          if (code === 200) {

            if (res.data.data && res.data.data.errorMsg) {
              wx.showToast({
                title: res.data.data.errorMsg,
                icon: "none",
                duration: 3000
              })
              return
            }
            resolve(res.data.data);
          } else {
            reject(res.data)
            // wx.showToast({
            //   icon:"error",
            //   title: '数据请求错误',
            // })
          }
        },
        fail() {
          reject('接口有误,请检查')

        },
        complete(res) {
          if (loadingCount > 0) {
            loadingCount--;
          }
          if (loadingCount === 0 && showLoading) {
            wx.hideLoading()
          }
          if (res.data) {
            if (res.data.code === 200) {

              if (res.data.data && res.data.data.errorMsg) {
                wx.showToast({
                  title: res.data.data.errorMsg,
                  icon: "none",
                  duration: 3000
                })
                return
              }
            } else if (res.data.code === 401) {

              wx.showToast({
                title: res.data.message || "登录状态超时",
                icon: "none",
                duration: 3000
              })
              wx.navigateTo({
                url: '/pages/login/login'
              })

            }  else {
              wx.showToast({
                title: res.data.message || "网络繁忙,请稍后再试",
                icon: "none",
                duration: 3000
              })
              reject(res.data)
            }
          } else {
            wx.showToast({
              title: "网络繁忙,请稍后再试",
              icon: "none",
              duration: 3000
            })
            reject(res.data)
          }

        }
      });

    });
  },
}
注解
  • 引入 env.js 文件,该文件中包含了请求的基础 URL。 env.js 文件通常用于存放环境配置信息,例如不同环境下的接口地址、域名等。这样做的好处是可以将环境配置信息与代码逻辑分离,便于管理和维护

    __wxConfig.envVersion 只能在小程序的 js 文件中使用,在 wxml 和 wxss 文件中无法使用。

javascript 复制代码
const env = wx.getAccountInfoSync().miniProgram.envVersion

const baseApi = {
// 开发版环境
develop: {
baseUrl: "https://xxxx.com"
},
// 体验版
trial:  {
  baseUrl: "https://xxxx.com"
},
// 正式版
release: {
 baseUrl: "https://xxxx.com"
}
};
const api = baseApi[env]
console.log(__wxConfig.envVersion,"__wxConfig.envVersion 是一个可以用来判断当前小程序运行的环境变量。它的值通常为 develop, trial, 或者 release")
export default api;
  • 定义了一个全局变量 loadingCount,用于记录正在加载的请求数量。
    • 在请求完成后的回调函数中,判断 loadingCount 的值,如果大于 0,则减少 loadingCount 的值。然后根据 showLoading 参数判断是否隐藏加载提示,如果需要隐藏,则调用 wx.hideLoading 方法。

页面使用

javascript 复制代码
import {
  request
} from '../../utils/request'
Page({
handleGetList() {
        // get
        request('接口地址',{请求参数}).then(res=>{ })
         // post
        request('接口地址',{请求参数},"POST").then(res=>{ })
    },
})
相关推荐
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
小飞哥liac8 小时前
微信小程序的组件
微信小程序
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨8 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL8 小时前
npm入门教程1:npm简介
前端·npm·node.js