js에서 비동기 기능을 사용하는 방법에 대한 자세한 설명

이번에는 js에서 비동기 함수를 사용하는 방법에 대해 자세히 설명하겠습니다. js에서 비동기 함수를 사용할 때 주의사항은 무엇인가요?

1. 궁극적인 해결책

비동기 작업은 JavaScript 프로그래밍에서 골치 아픈 문제이므로 일부 사람들은 이 문제를 해결하기 위해 다양한 솔루션을 제안해 왔습니다.

최초의 콜백 함수부터 Promise 객체, 그리고 Generator 함수까지 매번 개선이 있었지만 불완전한 느낌이 들었습니다. 이들 모두에는 추가적인 복잡성이 있으며 추상화의 기본 작동 메커니즘에 대한 이해가 필요합니다.

비동기 I/O는 단지 파일을 읽는 것 아닌가요? 왜 그렇게 복잡해야 할까요? 비동기 프로그래밍의 가장 높은 상태는 비동기 프로그래밍인지 전혀 걱정할 필요가 없다는 것입니다.

async 기능은 터널 끝의 빛이며 많은 사람들이 이를 비동기 작업을 위한 궁극적인 솔루션으로 간주합니다.

2. 비동기 기능이란 무엇인가요?

한마디로 비동기 함수는 생성기 함수의 설탕 문법입니다.

이전 글에는 두 개의 파일을 순차적으로 읽는 제너레이터 함수가 있었습니다.

var fs = require('fs');
var readFile = function (fileName){
 return new Promise(function (resolve, reject){
  fs.readFile(fileName, function(error, data){
   if (error) reject(error);
   resolve(data);
  });
 });
};
var gen = function* (){
 var f1 = yield readFile('/etc/fstab');
 var f2 = yield readFile('/etc/shells');
 console.log(f1.toString());
 console.log(f2.toString());
};

는 다음과 같이 비동기 함수로 작성되었습니다.

var asyncReadFile = async function (){
 var f1 = await readFile('/etc/fstab');
 var f2 = await readFile('/etc/shells');
 console.log(f1.toString());
 console.log(f2.toString());
};

비교해 보면 비동기 함수는 Generator 함수의 별표(*)를 async로 바꾸고, Yield를 Wait로 바꾸는 것이 전부라는 것을 알 수 있습니다.

3. 비동기 함수의 장점

제너레이터 함수에 대한 비동기 함수의 개선 사항은 다음 세 가지로 반영됩니다.

(1) 내장형 액추에이터. Generator 함수의 실행은 실행기에 의존해야 하므로 co 함수 라이브러리가 있고 비동기 함수에는 자체 실행기가 함께 제공됩니다. 즉, 비동기 함수의 실행은 한 줄만 있으면 일반 함수와 완전히 동일합니다.

var result = asyncReadFile();

(2) 더 나은 의미론. Async 및 Wait는 별표 및 Yield보다 더 명확한 의미를 갖습니다. async는 함수에 비동기 작업이 있음을 의미하고, wait는 다음 표현식이 결과를 기다려야 함을 의미합니다.

(3) 적용 범위가 더 넓어졌습니다. co 함수 라이브러리 규칙에 따르면, Yield 명령 뒤에는 Thunk 함수 또는 Promise 객체만 올 수 있고, 비동기 함수의 Wait 명령 뒤에는 Promise 객체와 기본 유형 값(숫자 값, )이 올 수 있습니다. strings 및 부울 값을 사용하지만 이는 동기 작업과 동일합니다).

4. 비동기 함수 구현

비동기 함수의 구현은 생성기 함수와 자동 실행기를 함수로 감싸는 것입니다.

async function fn(args){
 // ...
}
// 等同于
function fn(args){ 
 return spawn(function*() {
  // ...
 }); 
}

모든 비동기 함수는 위의 두 번째 형식으로 작성할 수 있습니다. 여기서 생성 함수는 자동 실행기입니다.

Spawn 함수의 구현은 아래와 같습니다. 이는 기본적으로 이전 자동 실행기의 복제본입니다.

function spawn(genF) {
 return new Promise(function(resolve, reject) {
  var gen = genF();
  function step(nextF) {
   try {
    var next = nextF();
   } catch(e) {
    return reject(e); 
   }
   if(next.done) {
    return resolve(next.value);
   } 
   Promise.resolve(next.value).then(function(v) {
    step(function() { return gen.next(v); });   
   }, function(e) {
    step(function() { return gen.throw(e); });
   });
  }
  step(function() { return gen.next(undefined); });
 });
}

비동기 함수는 ES6가 아닌 ES7에 속하는 매우 새로운 구문 기능입니다. 현재는 아직 제안 단계이지만, 트랜스코더인 Babel과 Regenerator는 이미 지원되어 트랜스코딩 후에 사용할 수 있습니다.

5. 비동기 함수 사용법

Generator 함수와 마찬가지로 비동기 함수도 Promise 객체를 반환하며 then 메소드를 사용하여 콜백 함수를 추가할 수 있습니다. 함수가 실행될 때 대기가 발생하면 먼저 반환하고 트리거된 비동기 작업이 완료될 때까지 기다린 다음 함수 본문의 후속 명령문을 실행합니다.

다음은 예시입니다.

async function getStockPriceByName(name) {
 var symbol = await getStockSymbol(name);
 var stockPrice = await getStockPrice(symbol);
 return stockPrice;
}
getStockPriceByName('goog').then(function (result){
 console.log(result);
});

위 코드는 주식 시세를 구하는 함수입니다. 함수 앞의 async 키워드는 함수 내부에 비동기 작업이 있음을 나타냅니다. 이 함수가 호출되면 Promise 객체가 즉시 반환됩니다.

다음 예에서는 값을 출력할 시간을 밀리초 단위로 지정합니다.

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

위 코드는 50밀리초 후에 "hello world"가 출력되도록 지정합니다.

6. 참고 사항

Wait 명령 뒤에 있는 Promise 개체가 거부될 수 있으므로 wait 명령을 try...catch 코드 블록에 넣는 것이 가장 좋습니다.

async function myFunction() {
 try {
  await somethingThatReturnsAPromise();
 } catch (err) {
  console.log(err);
 }
}
// 另一种写法
async function myFunction() {
 await somethingThatReturnsAPromise().catch(function (err){
  console.log(err);
 });
}

await 명령은 비동기 기능에서만 사용할 수 있습니다. 일반 기능에서 사용하면 오류가 보고됩니다.

async function dbFuc(db) {
 let docs = [{}, {}, {}];
 // 报错
 docs.forEach(function (doc) {
  await db.post(doc);
 });
}

上面代码会报错，因为 await 用在普通函数之中了。但是，如果将 forEach 方法的参数改成 async 函数，也有问题。

async function dbFuc(db) {
 let docs = [{}, {}, {}];
 // 可能得到错误结果
 docs.forEach(async function (doc) {
  await db.post(doc);
 });
}

上面代码可能不会正常工作，原因是这时三个 db.post 操作将是并发执行，也就是同时执行，而不是继发执行。正确的写法是采用 for 循环。

async function dbFuc(db) {
 let docs = [{}, {}, {}];
 for (let doc of docs) {
  await db.post(doc);
 }
}

如果确实希望多个请求并发执行，可以使用 Promise.all 方法。

async function dbFuc(db) {
 let docs = [{}, {}, {}];
 let promises = docs.map((doc) => db.post(doc));
 let results = await Promise.all(promises);
 console.log(results);
}
// 或者使用下面的写法
async function dbFuc(db) {
 let docs = [{}, {}, {}];
 let promises = docs.map((doc) => db.post(doc));
 let results = [];
 for (let promise of promises) {
  results.push(await promise);
 }
 console.log(results);
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Nodejs内存治理步骤详解

Vue页面骨架屏注入步骤详解

위 내용은 js에서 비동기 기능을 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!