JavaScript - 如何从 Promise 中获取特定数据答案

【问题标题】：JavaScript - How to get the specific data from a PromiseJavaScript - 如何从 Promise 中获取特定数据
【发布时间】：2020-03-29 09:21:17
【问题描述】：

所以情况就是这样：我正在尝试从 Promise 中获取特定数据。 Promise 显示来自 API 的数据：https://api.covid19api.com/country/netherlands/status/confirmed

Promise 由三个值（0、1 和 2）组成，每个值由一个包含多个变量的数组组成。我想从 Promise 名称 '0' 的数组中的最后一个变量中获取数据（你明白吗？）。

这是 Promise 的样子： Here you can see it consists of the values 0, 1 and 2

点击后：I try to get the data from the array (PromiseValue I believe it is called?)

这就是我想要的数据：数组中最后一个变量的数据。从这个变量中，我想要来自“案例”的数据，所以是“8603”。 This is the data I try to get

function getAPIdata() {

  var url = 'https://api.covid19api.com/country';
  var country = document.getElementById('country').value;
  var requestConfirmed = url + '/' + country + '/' + 'status' + '/' + 'confirmed';
  var requestRecovered = url + '/' + country + '/' + 'status' + '/' + 'recovered';
  var requestDeaths = url + '/' + country + '/' + 'status' + '/' + 'deaths';


  var requestOptions = {
    method: 'GET',
    redirect: 'follow'
  };

  Promise.all([
    fetch(requestConfirmed, requestOptions),
    fetch(requestRecovered, requestOptions),
    fetch(requestDeaths, requestOptions)
  ])

    .then(function (responses) {
      return responses.map(function (response){
        if(!response.ok) throw Error(response.statusText);
        return response.json();
      });

    }) .then(function(result){
        onAPISucces(result);
        // console.log(result);

    }) .catch(function (error){
        onAPIError(error);
    });

  }

  function onAPISucces(result) {

    var type = result;
    var landenLijst = result;
    console.log(landenLijst);
    var country = document.getElementById('country').value;
    // console.log(landenLijst[landenLijst.length - 1].Cases);
    for(var i=0; i < landenLijst.length; i++);
    // console.log(landenLijst[i].TotalConfirmed);

    var totaalAantalBesmettingen = landenLijst[0].PromiseValue[PromiseValue.length - 1];

    var totaleBesmettingen = document.getElementById('confirmedInformation');
    totaleBesmettingen.innerHTML = totaalAantalBesmettingen;

  }

  function onAPIError(error) {
    console.error('Oeps, foutje!', error);
    var totaleBesmettingen = document.getElementById('confirmedInformation');
    totaleBesmettingen.innerHTML = 'Please try again. Did you enter a country?';
  }

  document.getElementById('zoek').onclick = function(){
    getAPIdata();
  };

<body>

      <form>
  			<fieldset>
  				<legend>Choose a country:</legend>
  				<label for="country">Country:</label>
  				<input type="text" name="country" id="country" placeholder="For example: Belgium"/>
  				<input type="button" id="zoek" value="Search" />
  			</fieldset>
  		</form>
      <p id="confirmedInformation"></p>
      <p id="recoveredInformation"></p>
      <p id="deathsInformation"></p>

      <p id="test"></p>

  	</body>

我被困在下面的代码中（您可以在我的 JavaScript 代码中找到）。我不知道如何从数组中获取特定数据。你知道我做错了什么吗？

var totaalAantalBesmettingen = landenLijst[0].PromiseValue[PromiseValue.length - 1];

【问题讨论】：

标签： javascript api promise

【解决方案1】：

从数组中弹出元素并相应地访问 Cases 属性

见下文：

 let data=result;
    let confirmed=data[0].pop();
    let recovered=data[1].pop();
    let deaths=data[2].pop();  
document.querySelector('#confirmedInformation').innerHTML="Confirmed:"+confirmed.Cases;

运行这段代码sn-p。会很有趣

function getAPIdata() {
 // document.querySelector('span').classList.toggle('hidden');
  var url = 'https://api.covid19api.com/country';
  var country = document.getElementById('country').value;
  var requestConfirmed = `${url}/${country}/status/confirmed`;
  var requestRecovered = `${url}/${country}/status/recovered`;
  var requestDeaths = `${url}/${country}/status/deaths`;
    Promise.all([
        fetch(requestConfirmed),
        fetch(requestRecovered),
        fetch(requestDeaths)
     ])
     .then(function (responses) {
       let jsonPromises=[];
       responses.forEach((response)=> jsonPromises.push(response.json()));
        return Promise.all(jsonPromises);
      })
     .then(function(result){
     // document.querySelector('span').classList.toggle('hidden');
        onAPISucces(result);
      }) 
      .catch(function (error){
      // document.querySelector('span').classList.toggle('hidden');
       console.log(error);
        onAPIError(error);
      });

  }
  function onAPISucces(result) {
    //console.log(result);
    let data=result;
    let confirmed=data[0].pop();
    let recovered=data[1].pop();
    let deaths=data[2].pop();  document.querySelector('#confirmedInformation').innerHTML="?Confirmed:"+confirmed.Cases;  document.querySelector('#recoveredInformation').innerHTML="?Recovered:"+recovered.Cases;  document.querySelector('#deathsInformation').innerHTML="?Deaths:"+deaths.Cases;
    
  }
  function onAPIError(error) {
    console.error('Oeps, foutje!', error);
     document.querySelector('#test').innerHTML="Try again with valid country ???????";
     document.querySelector('#confirmedInformation').innerHTML="";  document.querySelector('#recoveredInformation').innerHTML="";  document.querySelector('#deathsInformation').innerHTML="";
  }

  document.getElementById('zoek').onclick = function(){
    getAPIdata();
  };

.hidden{
display:none;
}

<body>
   <form>
  <fieldset>
  <legend>Choose a country to get Coronavirus ? update:</legend>
  <label for="country">Country:???????</label>
  <input type="text" name="country" id="country" placeholder="For example: NetherLands"/>
  	<input type="button" id="zoek" onclick=" getAPIdata()" value="Search" />
  	</fieldset>
  		</form>
      <span>?Data from API</span>
      <p id="confirmedInformation"></p>
      <p id="recoveredInformation"></p>
      <p id="deathsInformation"></p>
      <p id="test"></p>
  	</body>

【讨论】：

感谢您的帮助！我不知道答案实际上如此复杂。我从来没有使用过 pop() 和 'let'，所以我今天学到了新东西。谢谢！
这并不复杂。这很简单。请参阅 Pop 将为您提供数组中的最后一个对象。 Let 是变量声明与 var 相同，但它的范围仅限于在其中声明它的块。例如，您在循环中声明 let v=o 在循环后您无法访问 v.. 它给出未定义。在循环中使用 var v=0 时，您可以在循环后访问仍然变量 v... 明白了..？
我现在明白了。确实，没那么复杂！由于您的明确解释，我了解您的代码版本以及我今天学到的新东西。再次感谢您的帮助！我很感激:)

【解决方案2】：

map 不会评估来自json() 调用的承诺。您也必须将它们视为承诺。

   // ...
   .then(function (responses) {
      return Promise.all(responses.map(function (response){
        if(!response.ok) throw Error(response.statusText);
        return response.json();
      }));
   });
   // ...

【讨论】：

你是对的。我现在没有这是可能的。谢谢！ :)