집 > 기사 > 웹 프론트엔드 > JavaScript 비동기 경험을 위한 더 나은 솔루션 공유

JavaScript 비동기 경험을 위한 더 나은 솔루션 공유

小云云원래의: 2018-01-09 09:08:371614검색

이 기사는 주로 JavaScript 경험 비동기성을 위한 더 나은 솔루션을 설명합니다. 이 측면이 필요한 친구는 이 기사를 참조하여 모두에게 도움이 되기를 바랍니다.

1. 비동기 솔루션의 진화 역사
JavaScript의 비동기 작업은 항상 골치 아픈 문제였기 때문에 이에 대한 다양한 솔루션이 계속 제안되고 있습니다. 최초의 콜백 함수(ajax의 오랜 친구), Promise(새 친구 아님), 그리고 ES6 Generator(강력한 친구)까지 추적할 수 있습니다.
몇 년 전에는 유명한 Async.js를 사용했을 수도 있지만 콜백 함수를 없애지 않았으며 오류 처리도 "콜백 함수의 첫 번째 매개 변수를 사용하여 오류를 전달하는 데 사용됩니다"라는 규칙을 따랐습니다. 잘 알려진 콜백 지옥은 Generator가 이 비동기 스타일을 변경할 때까지 여전히 두드러진 문제였습니다.
그러나 ES7의 비동기 대기(Bunker의 새로운 친구)가 등장하면서 비동기 메커니즘을 가지면서 동기 스타일 코드를 쉽게 작성할 수 있게 되었습니다. 이는 현재 가장 간단하고 우아하며 최고의 솔루션이라고 할 수 있습니다.

2. 비동기 대기 구문
async 대기 구문은 상대적으로 간단하며 별표 및 수율보다 더 의미론적입니다. 다음은 1초 후에 hello world를 출력하는 간단한 예입니다.

function timeout(ms) {
 return new Promise((resolve) => {
  setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value)
}
asyncPrint(&#39;hello world&#39;, 1000);

await는 비동기 함수에서만 사용할 수 있습니다. 일반 함수에서 사용하면

await 뒤에 Promise가 표시됩니다. object (물론 다른 값도 가능하지만 즉시 해결되는 Promise로 패키징되므로 의미가 없습니다.)

await는 실행을 계속하기 전에 Promise의 결과가 반환될 때까지 기다립니다

하지만 Wait는 무엇입니까? 기다리고 있는 것은 Promise 객체이므로 .then( )을 작성할 필요가 없습니다. 반환 값을 직접 가져오고 위 코드를 미세 조정하면 반환 값 결과가 hello world를 출력할 수도 있음을 알 수 있습니다.

function timeout(ms) {
 return new Promise((resolve) => {
  setTimeout(_ => {resolve(&#39;hello world&#39;)}, ms);
 });
}
async function asyncPrint(ms) {
 let result = await timeout(ms);
 console.log(result)
}
asyncPrint(1000);

3. async wait 오류 처리

앞서 언급했듯이 Wait는 Promise 객체를 기다리고 있지만 .then()을 쓸 필요가 없으므로 .catch()를 쓸 필요가 없습니다. try catch로 직접 오류를 잡을 수 있습니다. 이렇게 하면 중복되고 번거로운 오류 처리 코드를 피할 수 있습니다.

function timeout(ms) {
 return new Promise((resolve, reject) => {
  setTimeout(_ => {reject(&#39;error&#39;)}, ms);//reject模拟出错，返回error
 });
}
async function asyncPrint(ms) {
 try {
   console.log(&#39;start&#39;);
   await timeout(ms);//这里返回了错误
   console.log(&#39;end&#39;);//所以这句代码不会被执行了
 } catch(err) {
   console.log(err); //这里捕捉到错误error
 }
}
asyncPrint(1000);

여러 개의 대기가 있는 경우 try catch에 함께 넣을 수 있습니다.

async function main() {
 try {
  const async1 = await firstAsync();
  const async2 = await secondAsync();
  const async3 = await thirdAsync();
 }
 catch (err) {
  console.error(err);
 }
}

4. async wait에 대한 참고 사항

1) 앞에서 언급한 것처럼 wait 명령 뒤의 Promise 개체는 거부 또는 논리 오류일 수 있으므로 대기를 넣는 것이 가장 좋습니다. try catch 코드 블록.

2) 여러 대기 명령의 비동기 작업의 경우 종속성이 없으면 동시에 트리거되도록 합니다.

const async1 = await firstAsync();
const async2 = await secondAsync();

위 코드에서 async1과 async2가 두 개의 독립적인 비동기 작업인 경우 firstAsync가 완료될 때까지 secondAsync가 실행되지 않기 때문에 이렇게 작성하는 것이 더 시간이 많이 걸립니다. Promise.all:

let [async1, async2] = await Promise.all([firstAsync(), secondAsync()]);

3) Wait는 비동기 함수에서만 사용할 수 있습니다. 일반 함수에서 사용하면 오류가 보고됩니다.

async function main() {
 let docs = [{}, {}, {}];
 //报错 await is only valid in async function
 docs.forEach(function (doc) {
  await post(doc);
  console.log(&#39;main&#39;);
 });
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

forEach 내부 메서드에 async를 추가하세요.

async function main() {
 let docs = [{}, {}, {}];
 docs.forEach(async function (doc) {
  await post(doc);
  console.log(&#39;main&#39;);
 });
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

하지만 3개의 메인이 동시에 출력된다는 것을 알 수 있습니다. 이는 포스트가 순차적으로 실행되지 않고 동시에 실행된다는 것을 의미합니다. for 으로 변경하면 3개의 메인이 1초 간격으로 출력됩니다.

async function main() {
 let docs = [{}, {}, {}];
 for (let doc of docs) {
  await post(doc);
  console.log(&#39;main&#39;);
 }
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

간단히 말해서, async Wait를 사용하고 나면 매우 간결하고 우아한 코드를 사용하여 다양하고 멋진 비동기 작업을 구현할 수 있고, 비즈니스 로직이 복잡할 때 콜백 지옥에 빠질 필요가 없다는 느낌이 듭니다. 이것이 궁극적인 해결책이라고 감히 말할 수는 없지만 실제로 현재 가장 우아한 해결책입니다!

JavaScript 비동기 경험을 위한 더 나은 솔루션 공유

관련 기사