小程序封装原生请求

const API_URL = "/* @echo API_URL */" 这个是基准地址,也就是请求的地址

let timerMap = new Map()
let requestId = 0
let isShowLoading = false
// 并发请求,出现token失效的时候
let refreshTokenLock = false

// 小程序当前路径
let getCurPageRoute = function getCurPageRoute() {
  let pages = getCurrentPages()
  let currentPage = pages[pages.length - 1];
  let route = currentPage.route // 小程序当前路径
  let params = currentPage.options // 小程序传递的参数
  let keys = Object.keys(params) // 参数键数组

  if (keys.length > 0) {
    return setUrlQuery(route, params)
  } else {
    return route
  }
}

function setUrlQuery(url, params = {}) {
  if (!url) return "";

  if (params) {
    const paramsArray = [];
    Object.keys(params).forEach(key => {
      return params[key] && paramsArray.push(`${key}=${params[key]}`);
    });
    if (url.search(/\?/) === -1) {
      url += `?${paramsArray.join("&")}`;
    } else {
      url += `&${paramsArray.join("&")}`;
    }
    return url;
  }
}

// 延迟
export function sleep(time = 1000) {
  return new Promise(resolve => {
    let timer = setTimeout(() => {
      clearTimeout(timer);
      timer = null;
      resolve(0);
    }, time);
  });
}

//  微信request封装
let wxRequestPromise = function (params, requestId) {

  return new Promise((resolve, reject) => {

    let header = {}
    const uid = userStore.userSettingInfo.uid;
    const token = userStore.token

    token && (header["Authorization"] = `Bearer ${token}`);
    uid && (header["x-k-uid"] = uid);

    params.header = {
      ...params.header,
      ...header,
    }

    if (!/^http|https/.test(params.url)) {
      params.url = API_URL + params.url;
    }

    wx.request({
      ...params,
      timeout: 10000,
      success: function (result) {
        resolve(result)
      },
      fail: function (result) {
        reject(result)
      }
    })
  })

}

const requestFunc = function ({
  url,
  method,
  data = {},
  header = {}
}) {
  return new Promise(async function (resolve, reject) {
    // 创建请求id
    let requestFlag = requestId++
    // 请求接口超过500ms,显示loading
    let timer = setTimeout(() => {
      isShowLoading = true;
      wx.showLoading({
        title: "努力加载中"
      })
    }, 2000)
    timerMap.set(requestFlag, timer)

    let resultParams = {
      url,
      method,
      data,
      header
    }

    let requestResult
    try {
      requestResult = await wxRequestPromise(resultParams)

      // 当业务接口出现异常
      /**
       * statusCode 网关状态
       * status     后端接口状态
       **/
      if (requestResult.statusCode >= 500 || requestResult.data.status >= 500 || requestResult.statusCode == 400 || requestResult.statusCode == 403) {
        throw new Error(`${requestResult.msg},url:${url},code:${requestResult.status}`)
      }

      // 当出现401,未授权的情况下,先刷新token,然后重发请求
      if (requestResult.statusCode == 401 || requestResult.data.status == 401) {
        if (refreshTokenLock) {
          // 如果正在刷新token的过程中,先延迟1s
          await sleep(1000)
        } else {
          refreshTokenLock = true;
          let refreshTokenResult = await userStore.refreshToken()
          if (!refreshTokenResult) {
            wx.showToast({
              icon: "none",
              title: "请登录"
            })
            wx.navigateTo({
              url: "/subPage/userLogin/login/login",
            })

            // 刷新token失败
            throw new Error(`刷新token失败,请检查获取token接口`)
          }
        }
        refreshTokenLock = false
        // 当成功刷新token之后,重新发送业务请求
        requestResult = await wxRequestPromise(resultParams)
      }

      resolve(requestResult.data);

    } catch (error) {

      // 处理timermap
      if (timerMap.has(requestFlag)) {
        let timer2 = timerMap.get(requestFlag)
        clearTimeout(timer2)
        timerMap.delete(requestFlag)
        if (timerMap.size == 0) {
          if (isShowLoading) {
            isShowLoading = false
            wx.hideLoading()
          }
        }
      }

      // 判断是否超时
      if (error.errMsg) {
        wx.getNetworkType({ // 获取网络状态
          success(res) {
            if (res.networkType == 'none') {
              // 无网络
              let curUrl = "/" + getCurPageRoute()
              let decodeCurUrl = encodeURIComponent(curUrl)
              if (!curUrl.includes('pages/error/error')) {
                wx.redirectTo({
                  url: `/pages/error/error?url=${decodeCurUrl}`,
                })
              }
            } else {
              resolve({
                msg: "请求超时",
                status: 1
              })
            }
          }
        })
      } else {
        let errorMsg = JSON.stringify(error)
        let curUrl = "/" + getCurPageRoute()
        let decodeCurUrl = encodeURIComponent(curUrl)
        resolve(requestResult.data);
      }

    }

    // 处理timermap
    if (timerMap.has(requestFlag)) {
      let timer2 = timerMap.get(requestFlag)
      clearTimeout(timer2)
      timerMap.delete(requestFlag)
      if (timerMap.size == 0) { // 属于方法,只能作用于对象上,获取元素的 个数
        if (isShowLoading) {
          isShowLoading = false
          wx.hideLoading()
        }
      }
    }
  })
}

// 封装的 get 请求
export function get(url, data = {}, header = {}) {
  return requestFunc({
    url,
    method: "GET",
    data,
    header
  });
}

// 封装的 POST 请求
export function post(url, data = {}, header = {}) {
  return requestFunc({
    url,
    method: "POST",
    data,
    header
  });
}

// 封装的 PUT 请求
export function put(url, data = {}, header = {}) {
  return requestFunc({
    url,
    method: "PUT",
    data,
    header
  });
}

// 封装的 POST 请求
export function formPost(url, data = "", header = {}) {
  return new Promise(function (resolve, reject) {
    wx.request({
      url: url,
      data: data,
      method: "POST",
      header: header,
      timeout: 10000,
      success: function (result) {
        resolve(result)
      },
      fail: function (result) {
        reject(result)
      }
    })
  })
}

// 获取 token 请求
// export function getByAuth(url, data = "", header = {}) {
//   return new Promise(function (resolve, reject) {
//     wx.request({
//       url: url,
//       data: data,
//       method: "GET",
//       header: header,
//       timeout: 10000,
//       success: function (result) {
//         resolve(result)
//       },
//       fail: function (result) {
//         reject(result)
//       }
//     })
//   })
// }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清云随笔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值