如何在 UNIAPP 前端实现定时刷新 Token，处理接口排队等待，以及 Promise 接口封装？

2023-12-27 04:15:51

在 UNIAPP 中提升前端体验：定时刷新 Token、接口排队等待和 Promise 接口封装

定时刷新 Token

在 UNIAPP 前端应用程序中，Token 通常用于验证用户身份和访问受保护的 API 接口。然而，Token 会随着时间的推移而过期，导致用户被迫退出或无法访问应用程序功能。为了解决这个问题，我们需要定时刷新 Token。

我们可以使用 JavaScript 的 setInterval() 或 setTimeout() 方法设置定时任务，定时向后端服务器发送刷新 Token 的请求。如果后端服务器返回新的 Token，则需要更新本地存储或 Cookie 中的 Token 值，以确保用户身份的持续验证。

接口排队等待

在某些情况下，多个接口请求可能会同时发生。为了防止服务器过载，我们需要对这些请求进行排队等待。我们可以使用 JavaScript 的 Array 或 Queue 类创建一个队列，将待发送的请求加入队列中。然后，按照顺序从队列中取出请求并发送。

Promise 接口封装

Promise 可以用来封装异步操作，使代码更易于阅读和维护。在 UNIAPP 前端开发中，我们可以创建 Promise 对象，并在其中执行异步操作。随后，我们可以使用 then() 和 catch() 方法处理成功和失败的返回结果。

代码示例

// 定时刷新 Token
setInterval(() => {
  uni.request({
    url: '/api/refresh_token',
    method: 'POST',
    success: (res) => {
      if (res.data.code === 0) {
        uni.setStorageSync('token', res.data.data.token);
      }
    },
  });
}, 3600000); // 每小时刷新一次

// 接口排队等待
const queue = [];

const sendRequest = (request) => {
  queue.push(request);
  if (queue.length === 1) {
    sendRequestFromQueue();
  }
};

const sendRequestFromQueue = () => {
  const request = queue.shift();
  uni.request(request).then((res) => {
    // 处理成功的返回结果
  }).catch((err) => {
    // 处理失败的返回结果
  }).finally(() => {
    if (queue.length > 0) {
      sendRequestFromQueue();
    }
  });
};

// Promise 接口封装
const fetchUserInfo = () => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: '/api/user_info',
      method: 'GET',
      success: (res) => {
        if (res.data.code === 0) {
          resolve(res.data.data);
        } else {
          reject(res.data.message);
        }
      },
      fail: (err) => {
        reject(err.message);
      },
    });
  });
};