Фильтрация массива с помощью функции, возвращающей обещание
дано
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, потому что возвращаются обещания, а не значения. Есть ли способ фильтровать массив с помощью функции, которая возвращает обещание?
Примечание: Для этого примера fs.stat был заменен на setTimeout, см. https://github.com/silenceisgolden/learn-esnext/blob/array-filter-async-function/tutorials/array-filter-with-async-function.js для конкретного кода.
7 ответов
Как упоминалось в комментариях,Array.prototype.filter
является синхронным и поэтому не поддерживает обещания.
поскольку теперь вы можете (теоретически) подкласс встроенных типов с 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)
});
вот так:
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
, то, что вы просили (почти, я не перегрузил обещание отказа, потому что я думаю, что это плохая идея). Дайте мне знать, если у вас возникнут вопросы.
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>
вот элегантное решение 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)
}
Я даже брошу в CodePen.
редуктор обещания к спасению!
[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));
редукторы потрясающие. "Сведите мою проблему к моей цели" кажется довольно хорошей стратегией для чего-то более сложного, чем то, что простые инструменты решат для вас, т. е. фильтрация массива вещей, которые не все доступны сразу.
поздно в игру, но так как никто больше не упоминал об этом, Bluebird поддерживает обещание.карта, которая является моим переходом к фильтрам, требующим обработки aysnc для условия,
function filterAsync(arr) {
return Promise.map(arr, num => {
if (num === 3) return num;
})
.filter(num => num !== undefined)
}
действительный способ сделать это (но это кажется слишком грязный):
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);
}
}
})();
опять же, кажется слишком запутанной.
вариант @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([]))
}
обратите внимание, что если (как в текущем случае) вам не нужно беспокоиться о том, что filter () имеет побочные эффекты, которые необходимо сериализовать, вы также можете сделать:
async function filterNums(arr) {
return await arr.reduce(async (res, val) => {
if (await filter(val)) {
(await res).push(val)
}
return res
}, Promise.resolve([]))
}