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

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

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

// 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 文件中无法使用。

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 方法。

页面使用

import {
  request
} from '../../utils/request'
Page({
handleGetList() {
        // get
        request('接口地址',{请求参数}).then(res=>{ })
         // post
        request('接口地址',{请求参数},"POST").then(res=>{ })
    },
})