Filtrage d'un tableau avec une fonction qui renvoie une promesse

Donné

let arr = [1,2,3];

function filter(num) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      if( num === 3 ) {
        res(num);
      } else {
        rej();
      }
    }, 1);
  });
 }

 function filterNums() {
   return Promise.all(arr.filter(filter));
 }

 filterNums().then(results => {
   let l = results.length;
   //length should be 1, but is 3
 });

La longueur est 3, car les Promesses sont retournés, et non des valeurs. Est-il un moyen de filtrer le tableau avec une fonction qui renvoie une Promesse?

Remarque: Pour cet exemple, fs.stat a été remplacé avec setTimeout, voir https://github.com/silenceisgolden/learn-esnext/blob/array-filter-async-function/tutorials/array-filter-with-async-function.js pour le code spécifique.

"Est-il un moyen de filtrer le tableau avec une fonction qui renvoie une Promesse?" Certainement pas avec l'aide de Array#filter.
C'est ce que je suis finales en tant que bien, mais pouvez-vous en expliquer la raison derrière cela? Je ne suis pas à comprendre pourquoi c'est le cas; il ne semble pas semi-logique pour moi.
parce que le filtre s'attend à une fonction qui retourne un booléen, pas une promesse objet
Oui, je le comprends. La modification de la fonction de filtre pour une fonction async produit les mêmes résultats, donc je suppose que renvoie également une promesse au lieu de l'attendre en attente pour le retour booléen.

OriginalL'auteur ajklein | 2015-10-26

Comme mentionné dans les commentaires, Array.prototype.filter est synchrone et par conséquent ne prend pas en charge les Promesses.

Puisque l'on peut (théoriquement) la sous-classe des types intégrés avec ES6, vous devriez être en mesure d'ajouter votre propre méthode asynchrone qui enveloppe du filtre existant de la fonction:

Note: j'ai commenté le sous-classement, car il n'est pas pris en charge par Babel juste encore pour les Tableaux

class AsyncArray /*extends Array*/ {
  constructor(arr) {
    this.data = arr; //In place of Array subclassing
  }

  filterAsync(predicate) {
     //Take a copy of the array, it might mutate by the time we've finished
    const data = Array.from(this.data);
    //Transform all the elements into an array of promises using the predicate
    //as the promise
    return Promise.all(data.map((element, index) => predicate(element, index, data)))
    //Use the result of the promises to call the underlying sync filter function
      .then(result => {
        return data.filter((element, index) => {
          return result[index];
        });
      });
  }
}
//Create an instance of your subclass instead
let arr = new AsyncArray([1,2,3,4,5]);
//Pass in your own predicate
arr.filterAsync(async (element) => {
  return new Promise(res => {
    setTimeout(() => {
      res(element > 3);
    }, 1);
  });
}).then(result => {
  console.log(result)
});

Babel REPL Démo

Ce n'est pas valide depuis super() doit être appelée avant toute affectation à this à l'intérieur de constructor
La mise en œuvre de la sous-classe était juste un exemple. Vous n'auriez pas besoin d'un constructeur avec de vrais sous-classement, que vous seriez à l'aide de la base de la Matrice de constructeur et non pas à l'aide de votre propre magasin de données
Vous avez raison, je viens d'avertissement pour les gens qui, à l'aveuglette "copier-coller" les accepté de répondre 🙂
Ah bon point, il ne ressemble vous pouvez supprimer simplement les commentaires de ce bloc et de le faire travailler...

OriginalL'auteur CodingIntrigue

Promesse Réducteur à la rescousse!

[1, 2, 3, 4].reduce((op, n) => {
    return op.then(filteredNs => {
        return new Promise(resolve => {
            setTimeout(() => {
                if (n >= 3) {
                    console.log("Keeping", n);
                    resolve(filteredNs.concat(n))
                } else {
                    console.log("Dropping", n);
                    resolve(filteredNs);
                }
            }, 1000);
        });
    });
}, Promise.resolve([]))
.then(filteredNs => console.log(filteredNs));

Réducteurs sont impressionnantes. "Réduire mon problème à mon but" semble être une très bonne stratégie pour quelque chose de plus complexe que ce que les outils simples permettra de résoudre pour vous, c'est à dire le filtrage d'un tableau de choses qui ne sont pas tous disponibles immédiatement.

OriginalL'auteur Dan Ross

2

Tard pour le jeu, mais puisque personne d'autre mention, Bluebird prend en charge Promesse.la carte qui est mon go-to pour les filtres nécessitant aysnc de traitement pour la condition,
```
function filterAsync(arr) {
    return Promise.map(arr, num => {
        if (num === 3) return num;
    })
        .filter(num => num !== undefined)
}
```
grand stade! En outre, comme de maintenant, il ya même Promesse.filtre à Bluebird bluebirdjs.com/docs/api/promise.filter.html

OriginalL'auteur Spencer MacBeth

Un moyen valable de le faire (mais il semble trop salissant):

let arr = [1,2,3];

function filter(num) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      if( num === 3 ) {
        res(num);
      } else {
        rej();
      }
    }, 1);
  });
}

async function check(num) {
  try {
    await filter(num);
    return true;
  } catch(err) {
    return false;
  }
}

(async function() {
  for( let num of arr ) {
    let res = await check(num);
    if(!res) {
      let index = arr.indexOf(num);
      arr.splice(index, 1);
    }
  }
})();

De nouveau, semble trop salissant.

Pour information, le async/await mots-clés sont ES7 (Candidat) pas ES6

OriginalL'auteur ajklein

Une variante de @DanRoss:

async function filterNums(arr) {
  return await arr.reduce(async (res, val) => {
    res = await res
    if (await filter(val)) {
      res.push(val)
    }
    return res
  }, Promise.resolve([]))
}

Remarque que si (comme dans le cas actuel), vous n'avez pas à vous soucier de filtre() ayant
effets secondaires qui doivent être sérialisé, vous pouvez également le faire:

async function filterNums(arr) {
  return await arr.reduce(async (res, val) => {
    if (await filter(val)) {
      (await res).push(val)
    }
    return res
  }, Promise.resolve([]))
}

OriginalL'auteur shaunc

Pour tapuscrit folk (ou es6 juste supprimer le type syntaxe)

function mapAsync<T, U>(array: T[], callbackfn: (value: T, index: number, array: T[]) => Promise<U>): Promise<U[]> {
  return Promise.all(array.map(callbackfn));
}

async function filterAsync<T>(array: T[], callbackfn: (value: T, index: number, array: T[]) => Promise<boolean>): Promise<T[]> {
  const filterMap = await mapAsync(array, callbackfn);
  return array.filter((value, index) => filterMap[index]);
}

es6

function mapAsync(array, callbackfn) {
  return Promise.all(array.map(callbackfn));
}

async function filterAsync(array, callbackfn) {
  const filterMap = await mapAsync(array, callbackfn);
  return array.filter((value, index) => filterMap[index]);
}

OriginalL'auteur William Lohan

Vous devez vous connecter pour publier un commentaire.