javascript - react : Wait until all assets are loaded

Question

在 React.js 项目中，我通过名为 loadAllAssets() 的函数在 componentWillMount() 生命周期方法中获取 svg。然后将这些保存在用户的 localStorage 中。

(1) 除了迭代请求的数量并将它们与 localStorage 的内容进行比较之外，是否有更优雅的方法来检查是否所有请求的 svg 文件确实已保存在 localStorage 中？

(2) 有没有更好的方法来阻止 componentDidMount 的初始化，只要资源仍在加载而不是将整个代码包装在条件中？我正在使用 Redux，所以我也会想到这一点，但在我看来就像使用大锤来敲开坚果一样。

index.js

import { loadAllAssets } from './utils/loadAllAssets';

class AppContainer extends React.Component {
  componentWillMount() {
    loadAllAssets();
  }
//...
}
ReactDOM.render(<Provider store={store} ><AppContainer /></Provider>, 
document.getElementById('root'));

loadAllAssets.js

import { ajaxSVG } from './gfAssetsLoader';

export const loadAllAssets = () => {
  /* write to localStorage */
  ajaxSVG('closeScene', '/assets/svg/close-scene-ani.svg');
//...
}

gfAssetsLoader.js

export const ajaxSVG = (assetName, path) => {
  try {
    let request = new XMLHttpRequest();
    request.open("GET", path, true);
    request.onload = function (e) {
      if( request.status >= 200 && request.status < 400 ) {
        let data = request.responseText;
        localStorage.setItem(assetName, data);
      } else console.log('Bad request. request status: ' + request.status);
    }
    request.send();
  }
  catch (e) {
    console.log(e);
  }
};

Answer 1

1-

export const loadAllAssets = () => {
  /* write to localStorage */
  return ajaxSVG('closeScene', '/assets/svg/close-scene-ani.svg');
  //...
}

export const ajaxSVG = (assetName, path) => {
  return new Promise((resolve, reject) => {
    try {
      let request = new XMLHttpRequest();
      request.open("GET", path, true);
      request.onload = function (e) {
        if( request.status >= 200 && request.status < 400 ) {
          let data = request.responseText;
          localStorage.setItem(assetName, data);
          resolve();
        } else reject('Bad request. request status: ' + request.status);
      }
      request.send();
    }
    catch (e) {
      reject(e);
    }
  });
};

现在您可以将 .then 连接到 loadAllAssets() 并更改那里的状态。

2- 要显示加载状态，只需创建一个加载状态，并在加载数据时将其更改为 false，这样它将在数据加载时显示加载器，加载完成后将显示数据。

import { loadAllAssets } from './utils/loadAllAssets';

class AppContainer extends React.Component {
  constructor() {
    super();

    this.state = {
       loading: false
    };
  }

  componentWillMount() {
    loadAllAssets()
    .then(() => {
      this.setState({ loading: false });
    });
  }
//...
  render() {
    if (this.state.loading) {
       return (
         <div><h1>Loading...</h1></div>
       );
    }

    return (
       //...something else
    );
  }
}
ReactDOM.render(<Provider store={store} ><AppContainer /></Provider>, 
document.getElementById('root'));