Внедрить решение Mutex для axios

Question

Если ваше приложение имеет несколько одновременных вызовов API и у вас может быть сценарий ios, где вы хотите остановить и контролировать их запуск. Я говорю о мьютексном решении для службы API, которое позволяет блокировать и разблокировать API для управления веб-службами.

Допустим, нашему приложению нужен токен API для передачи в заголовках для авторизации. Мы бы хотели получить этот токен, прежде чем какие-либо API-интерфейсы будут запущены из браузера. В случае истечения срока действия этого токена мы снова получим новый токен. Все остальные API из браузера должны ждать новый токен и затем запускать.

Answer 1

Во-первых, мы создаем ax ios instance

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  
  });  
}