약속 코드를 비동기 코드로 바꾸기 JavaScript의 map()을 사용하는 For 루프

Question

다음 코드는 정상적으로 작동합니다. 그러나 함수의 중간에있는 Promise 코드 (주석으로 표시)를 비동기 코드로 변경하고 for 루프를 map()으로 바꿔야합니다. 어떻게하면 좋을까요?

const main = async() => { 
    try{ 
     const driver = await new webdriver.Builder() 
      .withCapabilities(webdriver.Capabilities.chrome()) 
      .setLoggingPrefs(prefs) 
      .forBrowser('chrome') 
      .setChromeOptions(options) 
      .build(); 

     // Start promise code 
     await driver.findElements(By.css('input')) 
     .then(function(elements){ 
      for(let i=0; i<elements.length; i++){ 
       elements[i].getAttribute("value") 
       .then(function(val){ 
        console.log(val); 
       }); 
      } 
     }) 
     .catch(function(error){ 
      console.log(error); 
     }); 
     // End promise code 

     await driver.quit(); 
    } catch (error) { 
     console.log(error); 
    } 
}; 

main(); 

Answer 1

, 난 좋을 것 :

// Start promise code 
try { 
    for (let element of await driver.findElements(By.css('input'))){ 
    console.log(await element.getAttribute("value")); 
    } 
} catch (error) { 
    console.log(error); 
} 

이 루프에 let를 사용하여, async/await 멋지게 필수 프로그램을 탈환하는 방법을 보여줍니다.

코드가 다릅니다 (순서는 getAttribute 타이밍에 의존합니다). 속도가 중요한 경우 다음과 같은 순서를 유지하면서

병렬로 속성을 얻을 : 그것은 그래서

let elements = await driver.findElements(By.css('input')); 
for (let val of await Promise.all(elements.map(e => e.getAttribute("value")))) { 
    console.log(val); 
} 

Answer 2

그 약속 코드 중 일부를 다른 스타일의 기능적으로 동일한 코드로 바꾸고 싶습니다.

// Start promise code 
const elements = await driver.findElements(By.css('input')); 
await Promise.all(elements.map(ele => ele.getAttribute('value').then(console.log))).catch(console.log); 
// End promise code 

당신은/비동기과의 약속을 기반으로 코드를 대체하기 좋아하는 스타일 코드를 기다리고 거라고 언급 : 그렇다면, 여기에 두 줄로 압축하는 코드 (반신 반의)입니다. 비동기/대기가 어쨌든 약속을 기반으로하므로 (즉, 도움이된다고 생각하기는하지만) 일반적인 경우에는주의해야합니다 (따라서 이스케이프가 필요하지 않습니다). 약속을 사랑하는 법을 배우고 실제로 코드를보다 깨끗하게 만들 때만 async/await 구문을 사용하십시오. 당신이 단지 콘솔에 정보를 덤프하고 있기 때문에