Обещание гонки при обновлении .inner HTML приведет к удалению предыдущего значения (как это сделать правильно?) - PullRequest
Новая
       14

Обещание гонки при обновлении .inner HTML приведет к удалению предыдущего значения (как это сделать правильно?)

0 голосов
/ 28 апреля 2020

Вот моя проблема: у меня есть 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="https://cdn.jsdelivr.net/gh/michel47/snippets@6408682/js/essential.js"></script>
<!--
<script src="https://cdn.jsdelivr.net/gh/willforge/jsring/js/ipfs.js"></script>
-->

, поэтому событие, даже если ha sh правильно выбрано, не отображается на экране из-за того, что e.inner HTML не делает t содержит последнюю версию.

Как это сделать правильно, любая помощь будет оценена. + Michel

1 Ответ

0 голосов
/ 29 апреля 2020

кажется, что смешивание и обновление через div.container и через form.elements является виновником; и обновляя HTML оба с внутренним HTML xor оба с присвоением element.value работает

вот код, который работает: 

const container = document.getElementsByClassName('container')[0];
const form = document.getElementsByTagName('form')[0];

let peerid = getPeerId()
.then(id => { peerid = (typeof(id) == 'undefined') ? 'QmYourIPFSisNotRunning' : id; return peerid })
//.then( updateByName('container','peerid') )
.then( updateValue(form.elements['peerid']) )
.catch(logError);


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

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

function updateByName(tag,name) {
   return x => updateByName_cb(tag,name,x);
}
function updateByName_cb(tag,name,value) { 
   console.log('updating: '+tag+' :'+name+' /w value: '+value)
   if (typeof(callback) != 'undefined') {
      callback(name,value)
   } else {
      let elements = document.getElementsByClassName(tag);
      for (let i=0; i<elements.length; i++) {
         let e = elements[i];
         e.innerHTML = e.innerHTML.replace(new RegExp(':'+name,'g'),value)
         //e.insertAdjacentHTML('beforeEnd',e.innerHTML.replace(new RegExp(':'+name,'g'),value))
      }
   }
   return value;
}

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 getHash(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=":hash" size=47>
</form>
</div>
<!-- --------------------------------------------------------- -->
<script>
  var webui = 'http://127.0.0.1:5001'
  var qmEmpty = 'bafyaabakaieac'
</script>
<script src="https://cdn.jsdelivr.net/gh/michel47/snippets@6408682/js/essential.js"></script>
<!--
<script src="https://cdn.jsdelivr.net/gh/willforge/jsring/js/ipfs.js"></script>
-->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...