2017-02-27 6 views
-1

최근에 비동기 함수에 의해 반환 된 Promise 객체를 기다리는 자바 스크립트에서 기다리는 연산자가 있다는 것을 읽었습니다.대기중인 파일을 자바 스크립트에서 동 기적으로로드하기

내 목표는 외부 라이브러리가 필요없이 표준 자바 스크립트가 제공하는 기능 만 사용하는 것입니다. 그래서 내 질문입니다 : 어떻게 효율적으로 서버에서 순차적으로 (다른 한 파일) 후 데이터를 가져 오는 await 연산자를 사용할 수 있습니까?

+0

'await'은 코드를 동기로 만들지 않습니다. 그것은 당신이 * 보이는 동기 * (따라서 따라하기 쉬운) 코드를 작성할 수 있습니다. 파일을 순차적으로 가져오고 싶다면 순차적으로 불러 오기를'대기 '합니다 :'var a = await fetchFile (...); var b = fetchFile (...);을 기다립니다. ... '. –

+0

필요한 것은 [Fetch API] (https://developer.mozilla.org/en/docs/Web/API/Fetch_API)뿐입니다. – Ryan

답변

0

나는 내가 찾고있는 것을 얻을 수 있었다. 첫 번째 단계는 async function을 만든 다음 모든 코드를 해당 함수 내에서 동기식으로 실행해야하는 모든 코드를 넣는 것입니다. 이와

<html> 
<body> 
</body> 
</html> 

<script> 

var fileList = [ 
'test_1.txt', 
'test_2.txt', 
'test_3.txt', 
'test_4.txt', 
'test_5.txt' 
]; 

async function loadFiles() 
{ 
    for (i = 0; i < fileList.length; i++) 
    { 
     await fetch(fileList[i]).then(function(response){ 
      return response.text(); 
     }).then(function (text){ 
      console.log(text); 
     }); 
     console.log("loaded " + fileList[i]); 
    } 
} 

loadFiles(); 

</script> 

, 모든 파일이 다른 후 하나를로드됩니다 : 다음은 그위한 코드입니다. 이전에는 비동기 적으로 완료된 순차적 작업을 자바 스크립트에서 관리하기가 쉽기 때문에 요즘에는 이렇게하는 것이 꽤 놀랍습니다.