Фильтрация массива с функцией, которая возвращает обещание

Учитывая

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
 });

Длина равна 3, потому что возвращается Promises, а не значения. Есть ли способ фильтровать массив с функцией, которая возвращает Promise?

Примечание. В этом примере fs.stat был заменен на setTimeout, см. https://github.com/silenceisgolden/learn-esnext/blob/array-filter-async-function/tutorials/array-filter-with-async-function.js для конкретного кода.

ОТВЕТЫ

Ответ 1

Как упоминалось в комментариях, Array.prototype.filter является синхронным и, следовательно, не поддерживает Promises.

Поскольку теперь вы можете (теоретически) создавать подклассы встроенных типов с ES6, вы должны иметь возможность добавить свой собственный асинхронный метод, который обертывает существующую функцию фильтра:

Примечание. Я прокомментировал подклассификацию, потому что она еще не поддерживается Babel для массивов

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

Ответ 2

Вот путь:

var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
var filter = num => wait(1).then(() => num == 3);

var filterAsync = (array, filter) =>
  Promise.all(array.map(entry => filter(entry)))
  .then(bits => array.filter(entry => bits.shift()));

filterAsync([1,2,3], filter)
.then(results => console.log(results.length))
.catch(e => console.error(e));

Функция filterAsync принимает массив и функцию, которые должны либо возвращать true, либо false, либо возвращать обещание, которое разрешается true или false, то, что вы просили (почти, я не сделал) t перегрузка обещают отказ, потому что я думаю, что плохая идея). Дайте мне знать, если у вас есть какие-либо вопросы по этому поводу.

var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
var filter = num => wait(1).then(() => num == 3);

var filterAsync = (array, filter) =>
  Promise.all(array.map(entry => filter(entry)))
  .then(bits => array.filter(entry => bits.shift()));

filterAsync([1,2,3], filter)
.then(results => console.log(results.length))
.catch(e => console.error(e));

var console = { log: msg => div.innerHTML += msg + "<br>",
                error: e => console.log(e +", "+ (e.lineNumber-25)) };
<div id="div"></div>

Ответ 3

Вот элегантное решение 2017 года с использованием async/await:

Очень простое использование:

const results = await filter(myArray, async num => {
  await doAsyncStuff()
  return num > 2
})

Вспомогательная функция (скопируйте это на свою веб-страницу):

async function filter(arr, callback) {
  const fail = Symbol()
  return (await Promise.all(arr.map(async item => (await callback(item)) ? item : fail))).filter(i=>i!==fail)
}

Демо-версия:

// Async IIFE
(async function() {
  const myArray = [1, 2, 3, 4, 5]

  // This is exactly what you'd expect to write 
  const results = await filter(myArray, async num => {
    await doAsyncStuff()
    return num > 2
  })

  console.log(results)
})()


// Arbitrary asynchronous function
function doAsyncStuff() {
  return Promise.resolve()
}


// The helper function
async function filter(arr, callback) {
  const fail = Symbol()
  return (await Promise.all(arr.map(async item => (await callback(item)) ? item : fail))).filter(i=>i!==fail)
}

Ответ 4

Обещай редуктор на помощь!

[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));

Редукторы потрясающие. "Уменьшите мою проблему до моей цели", кажется, довольно хорошая стратегия для чего-то более сложного, чем простые решения для вас, то есть фильтрация массива вещей, которые не все доступны сразу.

Ответ 5

Для машинописного фолка (или es6 просто удалите синтаксис типа)

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]);
}

Ответ 6

Поздно к игре, но поскольку никто больше не упомянул об этом, Bluebird поддерживает Promise.map, который является моим ходом для фильтров, требующих обработки aysnc для условия,

function filterAsync(arr) {
    return Promise.map(arr, num => {
        if (num === 3) return num;
    })
        .filter(num => num !== undefined)
}

Ответ 7

Метод asyncFilter:

Array.prototype.asyncFilter = async function(f){
    var array = this;
    var booleans = await Promise.all(array.map(f));
    return array.filter((x,i)=>booleans[i])
}

Ответ 8

Правильный способ сделать это (но кажется слишком запутанным):

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);
    }
  }
})();

Опять же, кажется слишком запутанным.

Ответ 9

Я думаю, что это может быть проще и даже один лайнер

Вы можете легко обернуть фильтр() внутри Promise. solve() one

Promise.resolve(arr.filter(item => item.length > 2))

Ответ 10

Вариант @DanRoss's:

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([]))
}

Обратите внимание, что если (как в текущем случае) вам не нужно беспокоиться о том, что filter() имеет побочные эффекты, которые необходимо сериализовать, вы также можете:

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

Ответ 11

Если кого-то интересует современное решение для машинописи (для фильтрации используется символ сбоя):

const failSymbol = Symbol();

export async function filterAsync<T>(
  itemsToFilter: T[],
  filterFunction: (item: T) => Promise<boolean>,
): Promise<T[]> {
  const itemsOrFailFlags = await Promise.all(
    itemsToFilter.map(async (item) => {
      const hasPassed = await filterFunction(item);

      return hasPassed ? item : failSymbol;
    }),
  );

  return itemsOrFailFlags.filter(
    (itemOrFailFlag) => itemOrFailFlag !== failSymbol,
  ) as T[];
}

Ответ 12

Вы можете сделать что-то вроде этого...

theArrayYouWantToFilter = await new Promise(async (resolve) => {
  const tempArray = [];

  theArrayYouWantToFilter.filter(async (element, index) => {
    const someAsyncValue = await someAsyncFunction();

    if (someAsyncValue) {
      tempArray.push(someAsyncValue);
    }

    if (index === theArrayYouWantToFilter.length - 1) {
      resolve(tempArray);
    }
  });
});

Обернутый в асинхронную функцию...


async function filter(theArrayYouWantToFilter) {
  theArrayYouWantToFilter = await new Promise(async (resolve) => {
    const tempArray = [];

    theArrayYouWantToFilter.filter(async (element, index) => {
      const someAsyncValue = await someAsyncFunction();

      if (someAsyncValue) {
        tempArray.push(someAsyncValue);
      }

      if (index === theArrayYouWantToFilter.length - 1) {
        resolve(tempArray);
      }
    });
  });

  return theArrayYouWantToFilter;
}