微信小程序request请求二次封装

一、前言

        在小程序的开发过程中，我们经常会使用到request请求来获取数据。然而，原生的request请求不够友好且繁琐，我们一般需要进行一些二次封装来简化开发流程和提高开发效率。

二、代码实现

2.1 基本封装

// 提示语
const errorTips = "网络不佳，请稍后重试";
const systemTips = "系统维护中，请稍后重试";

/*
 * 展示进度条的网络请求
 * url:网络请求的url
 * params:请求参数
 * message: loading的提示信息
 * success:成功的回调函数
 * fail：失败的回调
*/

function customRquest(
  method,
  url,
  params,
  message,
  success,
  fail, 
  complete
) {
  console.log(url + '请求参数:', params);
  let header = {
    'Content-Type': 'application/json'
  };

  wx.request({
    url: "https://xxxxx/" + url,
    data: params,
    header,
    method,
    success: function (res) {
      console.log(url + '返回结果:', res);
      if (message != "") {
        wx.hideLoading();
      }
      if(!res.data.success && message){
        wx.showToast({
          title: res.data.tip || errorTips,
          icon: 'none',
        })
       }
      success(res.data);
    },
    fail: function (err) {
      console.error(`${url}接口错误：${err}`);
      if (message != "") {
        wx.hideLoading();
      }
      if (fail) {
        fail(err);
      }
    },
    complete: function (res) {
      if (complete) {
        complete(res);
      }
    }
  });
}

/**
 * POST 请求
*/

function postData(url, params, message, success, fail, complete) {
  customRquest("POST", url, params, message, success, fail, complete)
}
 

/**
 * GET 请求
*/

function getData(url, params, message, success, fail, complete) {
  customRquest("GET", url, params, message, success, fail, complete)
}

module.exports = {
  postData,
  getData
};

2.2 增加登录态

let loginCount = 0, loginIng = false
let requestQueue = []

// 提示语
const errorTips = "网络不佳，请稍后重试";
const systemTips = "系统维护中，请稍后重试";

/*
 * 展示进度条的网络请求
 * url:网络请求的url
 * params:请求参数
 * message: loading的提示信息
 * success:成功的回调函数
 * fail：失败的回调
 */

function customRquest(
  method,
  url,
  params,
  message,
  success,
  fail, 
  complete
) {
  wx.hideNavigationBarLoading();
  if(loginCount >= 3) {
    loginCount = 0
    return
  }
  console.log(url + '请求参数:', params);

  let header = {
    'Content-Type': 'application/json',
    'session': wx.getStorageSync('session')
  };

  wx.request({
    url: "https://xxxx/" + url,
    data: params,
    header,
    method,
    success: function (res) {
      console.log(url + '返回结果:', res);
      if (message != "") {
        wx.hideLoading();
      }
      if (res.data.code == "9999") {
        if(loginIng){
          // 防止多次登录
          // 方式一：使用定时器循环遍历
          // let reqTimer = setInterval(() => {
          //   if(!loginIng){
          //     clearInterval(reqTimer)
          //     return customRquest(method, url, params, message, success, fail);
          //   }
          // }, 100)
          // 方式二：使用数组存储未处理请求，登录后再遍历请求
          requestQueue.push({method, url, params, message, success, fail})
        }else{
          loginIng = true
          console.log('session失效');
          getSession(()=>{
            loginCount ++
            loginIng = false
            return customRquest(method, url, params, message, success, fail);
          })
        }
      } else {
        if(!res.data.success && message){
          wx.showToast({
            title: res.data.tip || errorTips,
            icon: 'none',
          })
        }
        loginCount = 0
        success(res.data);
      }
    },
    fail: function (err) {
      console.error(`${url}接口错误：${err}`);
      if (message != "") {
        wx.hideLoading();
      }
      if (fail) {
        fail(err);
      }
    },
    complete: function (res) {
      if (complete) {
        complete(res);
      }
    }
  });
}

/**
 * POST 请求
 */

function postData(url, params, message, success, fail, complete) {
  customRquest("POST", url, params, message, success, fail, complete)
}
 

/**
 * GET 请求
 */

function getData(url, params, message, success, fail, complete) {
  customRquest("GET", url, params, message, success, fail, complete)
}

// 获取session
function getSession(resolve) {
  wx.login({
    success(res) {
      if (res.code) {
        wx.request({
          url: "https://xxxx/login",
          data: { code: res.code },
          method: 'POST',
          success: res => {
            console.log("Login Res:", res.data)
            if (res.data.success) {
              let { session='' } = res.data?.info ?? {}
              wx.setStorageSync("session", session);
              // 设置过期时间
              let timestamp = Date.parse(new Date());
              let session_expiration = timestamp + 60 * 60 * 1000;
              wx.setStorageSync("session_expiration", session_expiration);
              resolve(true);
              while(requestQueue.length > 0){
                let { method, url, params, message, success, fail } = requestQueue.shift()
                customRquest(method, url, params, message, success, fail)
              }
            } else {
              wx.showToast({
                title: res.data.tip || '登录失败，请稍后再试',
                icon: 'none'
              });
            }
          },
          fail: err => {
            resolve(false);
            console.log('登录接口返回失败', err);
          }
        });
      }
    },
    fail(err){
      console.log("wx.login Err:", err)
    }
  })
}

module.exports = {
  postData,
  getData
};