更新.innerHTML时的承诺竞赛会导致删除先前的值（如何正确执行？）

这是我的问题：我有2个concurents函数，可以并行调用它们，并且可以按任意顺序执行它们，

我希望将它们各自的输出显示在html中当时的诺言得以解决。

但是，当我将div.container与.replace方法一起使用时，最后的承诺取消了前一个的动作。

我写了2个更新函数：

  • updateContainer() ：（断）
  • updatePeerid() ：（工作正常）

这是我的代码：




let peerid = getPeerId()
.then(id => { peerid = (typeof(id) == 'undefined') ? 'QmYourIPFSisNotRunning' : id; return peerid })
.then( updateContainer ) // <--- this one doesn't work
//.then( updatePeerId ) // <--- this one does work
.catch(logError);


load(window).then( _ => { // on window load compute the hash of initial mfspath's value
   console.log('// window loaded')
   form = document.getElementsByTagName('form')[0];
   inipath = form.elements['mfspath'].value
   console.log('initial path: ',inipath)
   return getMFSFileHash(inipath)
   .then( updateValue(form.elements['hash']) )
   .then(consLog('load.hash: '))
   .catch(logError)
}).catch(consLog('load'))

function updateValue(e) {
   return x => { e.value = x; return x; }
}

function updateContainer(id) { 
   name = 'peerid';

   if (typeof(callback) != 'undefined') {
      callback(name,id)
   } else {
      let elements = document.getElementsByClassName('container');
      for (let i=0; i<elements.length; i++) {
         let e = elements[i];
         e.innerHTML =  e.innerHTML.replace(new RegExp(':'+name,'g'),id)
            //console.log(e.innerHTML)
      }
   }
   return id;
}
function updatePeerId(id) { 
  let e = document.getElementsByTagName('form')[0].elements['peerid'];
  console.log('peerid: '+id)
  console.log(e.outerHTML)
  e.value = e.value.replace(new RegExp(':peerid','g'),id)
  return id
}

function getPeerId() {
     let url = webui + '/api/v0/config?&arg=Identity.PeerID&encoding=json';
     return fetch(url,{ method: "GET"} )
     .then( resp => resp.json() )
     .then( obj => { return Promise.resolve(obj.Value) })
     .catch(logError)
}

function getMFSFileHash(mfspath) {
   var url = webui + '/api/v0/files/stat?arg='+mfspath+'&hash=true'
   return fetch(url)
   .then( resp => resp.json() )
   .then( json => {
       if (typeof json.Hash == 'undefined') {
         if (typeof(qmEmpty) != 'undefined') { return qmEmpty }
         else { return 'QmYYY' }
       } else {
         return json.Hash
       }
   })
   .catch(logError)
}
<!DOCTYPE html>
<meta charset=utf8>

<!--
 REQUIREMENT:  NEED TO RUN A LOCAL IPFS DAEMON
-->
<div class=container>
<span id=core></span>
<form>
peerid: <input name=peerid value=":peerid" size=47>
<br>mfs: <input name=mfspath value="/my/identity/public.yml">
<br>hash: <input name=hash value="" size=47>
</form>
</div>
<!-- --------------------------------------------------------- -->
<script>
  var webui = 'http://127.0.0.1:5001'
  var qmEmpty = 'bafyaabakaieac'
</script>
<script src="@6408682/js/essential.js"></script>
<!--
<script src=".js"></script>
-->
回答如下：

似乎是通过div.container和form.elements进行混合和更新的元凶；并同时使用innerHTML x或同时使用element.value赋值更新HTML]