为 axios 实现 Mutex 解决方案答案

【问题标题】：Implement Mutex solution for axios为 axios 实现 Mutex 解决方案
【发布时间】：2020-03-24 06:36:15
【问题描述】：

如果您的应用程序有多个并发 API 调用，并且您可能需要停止并控制它们的触发。我说的是 API 服务的互斥解决方案，它允许锁定和解锁 API 以控制 Web 服务。

假设我们的应用需要一个 API 令牌在标头中传递以进行授权。我们希望在浏览器触发任何 API 之前获取此令牌。如果此令牌过期，我们将再次获取新令牌。来自浏览器的所有其他 API 应等待新令牌然后触发。

【问题讨论】：

【解决方案1】：

首先，我们创建 axios 实例

import APILockService from '../APILockService';
import axios from 'axios'; 

function apiRequestLockInterceptor(config) {
  if(APILockService.isLocked(config)) { 
   await APILockService.waitTillUnlocked(); 
  } 
return config; 
} 

const instance = axios.create(); 
instance.interceptors.request.use(apiRequestLockInterceptor);

export instance;

创建 APILockService 来管理 API 的锁定、解锁和等待

class APILockService {
    constructor() {
        this.locked = false
        this.lockToken = null;
    }

    lock = (lockToken) => {
        if(this.locked){
            throw new Error('APIService has already been locked.');
        }
        this.lockToken = lockToken;
        this.locked = true;
    }

    isLocked = (config) => {
        if(config.lockToken === this.lockToken){ //We do not want to block the API request which placed the lock in first place
            return false;
        }
        return this.locked;
    }

    releaseLock = (lockToken, resolve) => {
        if(lockToken === this.lockToken){
            this.locked = false;
            if(typeof this.resolveWaitPromise === 'function') {
                this.resolveWaitPromise();
            }
        }
    }

    waitTillUnlocked = () => {
        return new Promise((resolve, reject) => {
            this.resolveWaitPromise = () => {
                resolve();
            }
            setTimeout(() =>{
                this.locked = false;
                resolve();
            }, 300000);// timeout after 5 mins
        });
    }
}

const apiServiceInstance = new APILockService();

export default apiServiceInstance;

锁定令牌是一种识别放置锁定的 API 调用的方法。我们不想阻止此 API。

我们使用类似这样的 APILockService

function getAppToken() {  
  const lockToken = new Date().toISOString();  
  const options = {  
    method: ‘get’,  
    headers: { ‘content-type’: ‘application/x-www-form-urlencoded’},  
    data: qs.stringify(data),  
    url: ‘/app/token?userId=123’,  
    lockToken  
  };

  APILockService.lock(lockToken);  
  return axios(options)  
  .then(response => {  
    APILockService.releaseLock(lockToken);  
    return response.token  
  });  
}

【讨论】：