获取项目的版本,当版本变更时,提示用户是否刷新页面更新(部署新版本后)

119 阅读1分钟
import axios from 'axios';

// 当前版本 (后续自定义展示)
const [currentVersion, setCurrentVersion] = useState<any>('');  
// 提示框显隐 (后续自定义展示)
const [showInfo, setShowInfo] = useState<boolean>(false);

useEffect(() => {  
    checkVersion();  
    // 每隔10s,获取一次项目的版本
    const intervalGetVersion = setInterval(checkVersion1, 10000);  
    // 组件销毁后,停止定时器的运行
    return () => {  
        clearInterval(intervalGetVersion)  
    }  
}, []);

// 异步方式获取项目的版本
const checkVersion = async () => {  
    const response = await axios.get('/common/version.json');  
    console.log('localStorage', localStorage);  
    console.log('response', response);  
 
    // 比较项目版本是否一致
    if (!localStorage.version) {  
      // 版本不存在时,set进去最新的版本号
      localStorage.setItem('version', response.data.version);  
    } else {  
      if (String(localStorage.version) !== (String(response.data.version))) {  
        setCurrentVersion(response.data.version);  
        setShowInfo(true);  
       }  
    }  
};

// 刷新界面,清除缓存中的版本号
const refresh = () => {
    window.location.reload();
    localStorage.removeItem('version');
};