解决SDK插件多个动态资源异步加载，初始化报错问题

本文链接：https://blog.csdn.net/codezha/article/details/104043642

最近在项目中需要加载和使用一个SDK插件，需要按顺序加载CSS、js等动态资源，资源加载完成后，完成初始化即可正常使用该SDK插件。开发过程中因为忽略了动态资源都是异步加载，导致初始化失败，插件无法正常使用，以下两种方案可以解决该问题。

以下方法为动态加载css、js资源方法

loadHead(url) {
      const link = document.createElement("link");
      link.type = "text/css";
      link.rel = "stylesheet";
      link.href = url;
      document.head.appendChild(link);
},
loadHeadJs(url) {
      const s = document.createElement("script");
      s.type = "text/javascript";
      s.src = url;
      document.head.appendChild(s);
},
loadBody(url) {
      const s = document.createElement("script");
      s.type = "text/javascript";
      s.src = url;
      document.body.appendChild(s);
}

添加定时器，延时初始化（网络不佳，可能依然会报错）

//加载资源
 loadHead(cssUrl)
 loadHeadJs(jsHeadUrl)
 loadBody(jsBodyUrl)
 setTimeout(() => {
     //执行初始化方法 
 }, 1000);

promise实现加载完初始化（推荐）

loadHead(url) {
    const link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.head.appendChild(link);
},
loadHeadJs(url) {
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src = url;
    document.head.appendChild(s);
    //添加onload回调
    s.onload = function(){
        reslove();
    }
},
loadBody(url) {
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src = url;
    document.body.appendChild(s);
    //添加onload回调
    s.onload = function(){
        reslove();
    }
}
//加载资源
loadHead(cssUrl);
let a = loadHeadJs(jsHeadUrl);
let b = loadBody(jsBodyUrl);
promise.all([a,b]).then(()=>{
    //执行初始化方法 
})