Question

我正在使用https://pokeapi.co/ API来获取所有宠物小精灵。我正在尝试遍历每个神奇宝贝列表https://pokeapi.co/api/v2/pokemon/?limit=44并获取数据。我为此使用诺言。但是我的承诺是回报我“Value below was evaluated just now”。

我已经尝试了解决方法：-

1. JSON.stringify().
2. JSON.parse(JSON.stringify())
3. setTimeout
4. map, concat etc.

var getPokemonList = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "https://pokeapi.co/api/v2/pokemon/?limit=4");
    xhr.onload = () => resolve(JSON.parse(xhr.responseText));
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
});

var getPokemonListDetails = getPokemonList
    .then(function (fulfilledList) {
        console.log(fulfilledList.results);
        var pokemonList = [];
        setTimeout(() => {
            fulfilledList.results.forEach(function (pokemon) {
                const xhr = new XMLHttpRequest();
                xhr.open("GET", pokemon.url);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        pokemonList.push(JSON.parse(xhr.responseText));
                    }
                };
                xhr.send();
            });
        }, 3000); 
        return pokemonList;
    })
    .then(function (fulfilledListDetails) {
        console.log(fulfilledListDetails);
    })
    .catch(function (error) {
        console.log(error.message);
    });

上面的代码为我提供了“刚刚评估了下面的值”数组数据。我可以做些什么使它可用。

Answer 1

您正确地使用Pomise来包装第一个API调用，但是没有包装计时器和其他API调用，因此Promise会在完成之前解决。现代浏览器支持fetch()，它比XMLHttpRequest更易于使用，并且已经返回了一个Promise，可以轻松地将其链接起来。现在剩下的就是包装超时：

 const delay = ms => new Promise(res => setTimeout(res, ms));

现在我们有了所有这些承诺，Promise.all和链接可用于将它们组合在一起：

 const pokemonList = fetch(  "https://pokeapi.co/api/v2/pokemon/?limit=4" ).then(res => res.json());

 const pokemonDetails = pokemonList.then(list => {
   return delay(3000).then(() => {
     return Promise.all(list.results.map(pokemon => {
       return fetch(pokemon.url).then(res => res.json());
    });
  });
 });

Answer 2

function getPokemonList(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "https://pokeapi.co/api/v2/pokemon/?limit=4");
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  }).then(function(data){
    //Do whatever with data
}).catch(function(error){
    //Handle error
});

来源：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

对于链式然后函数，如何解决“下面的值刚刚被评估。”

2 个答案: