javascript 순서 forEach 루프와 함께 async/await 사용




promise all 순서 (12)

forEach 루프에서 async / await 사용에 문제가 있습니까? 파일 배열을 반복하고 각 파일의 내용을 await .

import fs from 'fs-promise'

async function printFiles () {
  const files = await getFilePaths() // Assume this works fine

  files.forEach(async (file) => {
    const contents = await fs.readFile(file, 'utf8')
    console.log(contents)
  })
}

printFiles()

이 코드는 작동하지만 이것으로 뭔가 잘못 될 수 있습니까? 나는 누군가 당신이 이것과 같은 고차 함수에서 async / await 를 사용해서는 안된다고 말하게 했으므로 이것에 문제가 있는지 묻고 싶었습니다.


현재 Array.forEach 프로토 타입 속성은 비동기 작업을 지원하지 않지만 필요에 맞게 자체 폴리 필을 만들 수 있습니다.

// Example of asyncForEach Array poly-fill for NodeJs
// file: asyncForEach.js
// Define asynForEach function 
async function asyncForEach(iteratorFunction){
  let indexer = 0
  for(let data of this){
    await iteratorFunction(data, indexer)
    indexer++
  }
}
// Append it as an Array prototype property
Array.prototype.asyncForEach = asyncForEach
module.exports = {Array}

그리고 그게 다야! 이제 이들에 대해 조작에 대해 정의 된 배열에서 비동기 forEach 메소드를 사용할 수 있습니다.

테스트 해보자 ...

// Nodejs style
// file: someOtherFile.js

const readline = require('readline')
Array = require('./asyncForEach').Array
const log = console.log

// Create a stream interface
function createReader(options={prompt: '>'}){
  return readline.createInterface({
    input: process.stdin
    ,output: process.stdout
    ,prompt: options.prompt !== undefined ? options.prompt : '>'
  })
}
// Create a cli stream reader
async function getUserIn(question, options={prompt:'>'}){
  log(question)
  let reader = createReader(options)
  return new Promise((res)=>{
    reader.on('line', (answer)=>{
      process.stdout.cursorTo(0, 0)
      process.stdout.clearScreenDown()
      reader.close()
      res(answer)
    })
  })
}

let questions = [
  `What's your name`
  ,`What's your favorite programming language`
  ,`What's your favorite async function`
]
let responses = {}

async function getResponses(){
// Notice we have to prepend await before calling the async Array function
// in order for it to function as expected
  await questions.asyncForEach(async function(question, index){
    let answer = await getUserIn(question)
    responses[question] = answer
  })
}

async function main(){
  await getResponses()
  log(responses)
}
main()
// Should prompt user for an answer to each question and then 
// log each question and answer as an object to the terminal

map과 같은 다른 배열 함수 중 일부에 대해서도 동일한 작업을 수행 할 수 있습니다 ...

async function asyncMap(iteratorFunction){
  let newMap = []
  let indexer = 0
  for(let data of this){
    newMap[indexer] = await iteratorFunction(data, indexer, this)
    indexer++
  }
  return newMap
}

Array.prototype.asyncMap = asyncMap

... 등등 :)

참고할 사항 :

  • iteratorFunction은 비동기 함수 또는 약속이어야합니다
  • Array.prototype.<yourAsyncFunc> = <yourAsyncFunc> 이전에 생성 된 배열은이 기능을 사용할 수 없습니다

Promise.all 대신 Array.prototype.map ( Promise 가 해결되는 순서를 보장하지는 않음) 대신 해결 된 Promise 부터 Array.prototype.reduce 사용합니다.

async function printFiles () {
  const files = await getFilePaths();

  await files.reduce(async (promise, file) => {
    // This line will wait for the last async function to finish.
    // The first iteration uses an already resolved Promise
    // so, it will immediately continue.
    await promise;
    const contents = await fs.readFile(file, 'utf8');
    console.log(contents);
  }, Promise.resolve());
}

그러나 위의 두 가지 솔루션 모두 작동하지만 Antonio 's는 코드를 적게 사용하여 작업을 수행합니다. 여기에서 여러 다른 자식 참조에서 데이터베이스의 데이터를 확인한 다음 모든 데이터를 배열로 푸시하고 결국에 해결할 수있는 방법이 있습니다. 끝난:

Promise.all(PacksList.map((pack)=>{
    return fireBaseRef.child(pack.folderPath).once('value',(snap)=>{
        snap.forEach( childSnap => {
            const file = childSnap.val()
            file.id = childSnap.key;
            allItems.push( file )
        })
    })
})).then(()=>store.dispatch( actions.allMockupItems(allItems)))

fs 가 약속 기반 일 때 Bergi의 솔루션 은 훌륭하게 작동합니다. 이를 위해 bluebird , fs-extra 또는 fs-promise 를 사용할 수 있습니다.

그러나 노드의 기본 fs 라이브러리에 대한 솔루션 은 다음과 같습니다.

const result = await Promise.all(filePaths
    .map( async filePath => {
      const fileContents = await getAssetFromCache(filePath, async function() {

        // 1. Wrap with Promise    
        // 2. Return the result of the Promise
        return await new Promise((res, rej) => {
          fs.readFile(filePath, 'utf8', function(err, data) {
            if (data) {
              res(data);
            }
          });
        });
      });

      return fileContents;
    }));

참고 : require('fs') 강제로 세 번째 인수로 기능을 수행하며, 그렇지 않으면 오류가 발생합니다.

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function

한 가지 중요한 경고 는 다음과 같습니다. await + for .. of method 및 forEach + async 방식은 실제로 다른 효과를 갖습니다.

실제 for 루프 내에서 await 하면 모든 비동기 호출이 하나씩 실행됩니다. 그리고 forEach + async 방식은 동시에 모든 약속을 해제합니다. 빠르지 만 때로는 압도적입니다 ( DB 쿼리를 수행하거나 볼륨 제한이있는 일부 웹 서비스를 방문 하고 한 번에 10 만 건의 호출을 원하지 않는 경우).

async/await 사용하지 않고 파일을 하나씩 읽도록하려면 reduce + promise (보다 우아함)를 사용할 수도 있습니다.

files.reduce((lastPromise, file) => 
 lastPromise.then(() => 
   fs.readFile(file, 'utf8')
 ), Promise.resolve()
)

또는 forEachAsync를 작성하여 기본적으로 동일한 for 루프 기반을 사용할 수 있습니다.

Array.prototype.forEachAsync = async function(cb){
    for(let x of this){
        await cb(x);
    }
}

코드가 작동하는지는 확실하지만 예상대로 작동하지 않습니다. 여러 비동기 호출을 발생 시키지만 printFiles 함수는 그 직후에 반환됩니다.

파일을 순서대로 읽으려면 forEach 실제로 사용할 수 없습니다 . 현대적인 for … of 루프를 대신 사용하면 await 가 예상대로 작동합니다.

async function printFiles () {
  const files = await getFilePaths();

  for (const file of files) {
    const contents = await fs.readFile(file, 'utf8');
    console.log(contents);
  }
}

파일을 병렬로 읽으려면 forEach 실제로 사용할 수 없습니다 . 각각의 async 콜백 함수 호출은 약속을 반환하지만 기다리지 않고 버립니다. 대신 map 사용하면 Promise.all 얻을 수있는 약속을 기다릴 수 있습니다.

async function printFiles () {
  const files = await getFilePaths();

  await Promise.all(files.map(async (file) => {
    const contents = await fs.readFile(file, 'utf8')
    console.log(contents)
  }));
}

npm의 p-iteration 모듈은 Array iteration 메서드를 구현하여 async / await와 함께 매우 간단하게 사용할 수 있습니다.

귀하의 경우에 대한 예 :

const { forEach } = require('p-iteration');
const fs = require('fs-promise');

(async function printFiles () {
  const files = await getFilePaths();

  await forEach(files, async (file) => {
    const contents = await fs.readFile(file, 'utf8');
    console.log(contents);
  });
})();

ES2018을 사용하면 다음에 대한 위의 모든 답변을 크게 단순화 할 수 있습니다.

async function printFiles () {
  const files = await getFilePaths()

  for await (const file of fs.readFile(file, 'utf8')) {
    console.log(contents)
  }
}

사양 참조 : https://github.com/tc39/proposal-async-iteration

2018-09-10 :이 답변은 최근 많은 주목을 받고 있습니다. 비동기 반복에 대한 자세한 내용은 Axel Rauschmayer의 블로그 게시물을 참조하십시오 : http://2ality.com/2016/10/asynchronous-iteration.html


다음은 forEachAsync 프로토 타입입니다. await 합니다.

Array.prototype.forEachAsync = async function (fn) {
    for (let t of this) { await fn(t) }
}

Array.prototype.forEachAsyncParallel = async function (fn) {
    await Promise.all(this.map(fn));
}

이 코드를 자신의 코드에 포함시킬 수 있지만, 전역 오염을 피하기 위해 다른 사람에게 배포하는 라이브러리에는 포함시키지 않아야합니다.


Task, futurize 및 traversable List를 사용하면 간단하게 할 수 있습니다.

async function printFiles() {
  const files = await getFiles();

  List(files).traverse( Task.of, f => readFile( f, 'utf-8'))
    .fork( console.error, console.log)
}

설정 방법은 다음과 같습니다.

import fs from 'fs';
import { futurize } from 'futurize';
import Task from 'data.task';
import { List } from 'immutable-ext';

const future = futurizeP(Task)
const readFile = future(fs.readFile)

원하는 코드를 구성하는 또 다른 방법은

const printFiles = files => 
  List(files).traverse( Task.of, fn => readFile( fn, 'utf-8'))
    .fork( console.error, console.log)

또는 더 기능 지향적 인

// 90% of encodings are utf-8, making that use case super easy is prudent

// handy-library.js
export const readFile = f =>
  future(fs.readFile)( f, 'utf-8' )

export const arrayToTaskList = list => taskFn => 
  List(files).traverse( Task.of, taskFn ) 

export const readFiles = files =>
  arrayToTaskList( files, readFile )

export const printFiles = files => 
  readFiles(files).fork( console.error, console.log)

그런 다음 부모 함수에서

async function main() {
  /* awesome code with side-effects before */
  printFiles( await getFiles() );
  /* awesome code with side-effects after */
}

인코딩에서 더 많은 유연성을 원한다면이 작업을 수행 할 수 있습니다 (재미있는 경우 파이프 제안 연산자를 사용하고 있습니다)

import { curry, flip } from 'ramda'

export const readFile = fs.readFile 
  |> future,
  |> curry,
  |> flip

export const readFileUtf8 = readFile('utf-8')

추신-콘솔 에서이 코드를 시도하지 않았으며 오타가있을 수 있습니다 ... "돔의 꼭대기에서 똑 바른 자유형!" 90 년대 아이들이 말하듯이 :-피


@Bergi의 답변 외에도 세 번째 대안을 제시하고 싶습니다. @Bergi의 두 번째 예제와 매우 유사하지만 각 readFile 개별적으로 기다리는 대신 약속을 배열합니다. 각 약속은 끝에서 기다리고 있습니다.

import fs from 'fs-promise';
async function printFiles () {
  const files = await getFilePaths();

  const promises = files.map((file) => fs.readFile(file, 'utf8'))

  const contents = await Promise.all(promises)

  contents.forEach(console.log);
}

fs.readFile 은 어쨌든 Promise 객체를 반환하므로 .map() 전달 된 함수는 async 일 필요는 없습니다. 따라서 promises 는 Promise 객체의 배열이며 Promise.all() 로 보낼 수 있습니다.

@ Bergi의 대답에서 콘솔은 파일 내용을 순서대로 기록 할 수 있습니다. 예를 들어, 아주 작은 파일이 아주 큰 파일보다 읽기를 마치면 작은 파일이 files 배열의 큰 파일 뒤에 오는 경우에도 먼저 기록됩니다. 그러나 위의 방법에서는 콘솔이 읽은 순서대로 파일을 기록합니다.


나는 잘 테스트 된 (주당 수백만 pify 다운로드) pify async 모듈을 사용합니다. 비동기 모듈에 익숙하지 않은 경우 해당 문서 를 확인하는 것이 좋습니다. 여러 개발자가 메소드를 다시 작성하거나 시간을 낭비하여 더 높은 순서의 비동기 메소드가 코드를 단순화 할 때 유지 관리하기 어려운 비동기 코드를 만드는 데 시간을 낭비하는 것을 보았습니다.

const async = require('async')
const fs = require('fs-promise')
const pify = require('pify')

async function getFilePaths() {
    return Promise.resolve([
        './package.json',
        './package-lock.json',
    ]);
}

async function printFiles () {
  const files = await getFilePaths()

  await pify(async.eachSeries)(files, async (file) => {  // <-- run in series
  // await pify(async.each)(files, async (file) => {  // <-- run in parallel
    const contents = await fs.readFile(file, 'utf8')
    console.log(contents)
  })
  console.log('HAMBONE')
}

printFiles().then(() => {
    console.log('HAMBUNNY')
})
// ORDER OF LOGS:
// package.json contents
// package-lock.json contents
// HAMBONE
// HAMBUNNY
```





ecmascript-2017