微信小程序 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=>{ })
    },
})
相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
井眼3 小时前
微信小程序-prettier 格式化
微信小程序·小程序
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
qq_17448285755 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502775 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序