JavaScript 비동기 함수_javascript 기술의 개발 역사에 대해 이야기해 보세요.

"비동기 자바스크립트의 진화" 외국어는 자바스크립트 비동기 함수의 개발 역사를 정리했습니다. 먼저 콜백 함수를 통해 비동기 함수를 구현한 뒤, 앞으로는 Promise/A와 제너레이터 함수를 거치게 됩니다. 비동기 기능이어야 합니다. 이 기사를 번역해주신 Jingzhuang님께 감사드립니다. 내용은 다음과 같습니다.

이제 수년간의 JavaScript 비동기 함수 개발을 검토해 보겠습니다.

콜백 함수 콜백

모든 것은 콜백 함수부터 시작되어야 할 것 같습니다.

비동기 자바스크립트

우리가 알고 있듯이 JavaScript에서 비동기 프로그래밍은 JavaScript 언어의 일급 시민 함수를 통해서만 수행될 수 있습니다. 이는 하나의 함수를 다른 함수의 매개변수로 전달할 수 있음을 의미합니다. 함수(즉, 콜백 함수) 내에서 호출됩니다. 이것이 콜백 함수가 탄생한 이유입니다. 함수를 다른 함수(현재는 고차 함수라고 함)에 매개변수로 전달하면 함수 내부에서 이 함수를 호출하여 해당 작업을 완료할 수 있습니다. 콜백 함수에는 반환 값이 없으며(반환을 사용하지 마세요) 함수 내에서 특정 작업을 수행하는 데에만 사용됩니다. 예를 살펴보세요:

Something.save(function(err) {  
 if (err) { 
  //error handling 
  return; // 没有返回值 
 } 
 console.log('success'); 
}); 

위의 예에서는 Node.js 자체의 특징 중 하나이기도 한 오류 우선 콜백 함수(error-first callbacks)를 시연했습니다. Node.js의 모든 핵심 모듈과 NPM 저장소의 대부분의 모듈입니다. 이 기능은 글을 쓸 때 따르게 됩니다.

콜백 함수를 과도하게 사용하는 경우의 문제점:

코드를 합리적으로 정리하지 못하면 콜백 지옥(콜백 지옥)이 발생하기 매우 쉽고, 이는 자신의 코드를 다른 사람이 이해하기 어렵게 만듭니다.
오류 처리 코드를 놓치기 쉽습니다.

return 문을 사용하여 값을 반환할 수 없으며, throw 키워드를 사용할 수 없습니다.

이러한 이유로 JavaScript 세계에서 우리는 항상 비동기 JavaScript 개발을 더 쉽게 만들 수 있는 실행 가능한 솔루션을 찾고 있습니다.

가능한 솔루션 중 하나는 비동기 모듈입니다. 콜백 함수를 오랫동안 다루어왔다면 JavaScript에서 무언가를 병렬 또는 직렬로 실행하거나 심지어 비동기 함수를 사용하여 배열에 무언가를 매핑하려는 경우가 얼마나 복잡한지 깊이 이해했을 것입니다. 비동기 기능을 사용하는 요소입니다. 따라서 이러한 문제를 해결하기 위해 비동기 모듈을 작성해 준 Caolan McMahon에게 감사드립니다.

비동기 모듈을 사용하면 다음과 같은 방식으로 쉽게 코드를 작성할 수 있습니다.

async.map([1, 2, 3], AsyncSquaringLibrary.square,  
 function(err, result){ 
 // result will be [1, 4, 9] 
}); 

비동기 모듈은 어느 정도 편의성을 제공하지만 아직은 단순하지 않고 코드도 읽기 쉽지 않아 Promise가 등장했습니다.

약속

현재 JavaScript 비동기 표준은 2012년부터 시작되었으며 ES6까지는 사용할 수 없었습니다. 그러나 Promise라는 용어는 JavaScript 커뮤니티에서 만들어지지 않았습니다. 이 용어는 1976년 Daniel P.friedman이 출판한 기사에서 유래되었습니다.

Promise는 비동기 작업의 최종 결과를 나타냅니다.

이제 Promise를 사용하여 위 코드로 완료한 작업을 완료합니다. Promise 스타일 코드는 다음과 같습니다.

Something.save()  
 .then(function() { 
  console.log('success'); 
 }) 
 .catch(function() { 
  //error handling 
 }) 

Promise에서도 콜백 함수가 사용되는 것을 확인할 수 있습니다. 콜백 함수는 Promise가 각각 충족되고 거부될 때 실행되는 then 및 catch 메소드 모두에 전달됩니다. Promise 함수의 또 다른 장점은 일련의 작업을 완료하기 위해 연결될 수 있다는 것입니다. 예를 들어 다음과 같은 코드를 작성할 수 있습니다.

saveSomething()  
 .then(updateOtherthing) 
 .then(deleteStuff)  
 .then(logResults); 

미리 만들어진 Promise가 없으면 일부 Promise 라이브러리를 사용해야 할 수도 있습니다. 인기 있는 선택은 bluebird를 사용하는 것입니다. 이러한 라이브러리는 기본 솔루션보다 더 많은 기능을 제공할 수 있으며 Promise/A 표준에 지정된 기능으로 제한되지 않습니다.

그런데 설탕법을 사용하는 건 어때요? 먼저 Promise: The Extension Problem 기사를 읽어보는 것이 좋습니다. Promise에 대한 자세한 내용은 Promise/A 표준을 참조하세요.

다음과 같이 질문하실 수 있습니다. 대부분의 라이브러리가 콜백 인터페이스만 노출한다면 Promise를 어떻게 사용해야 합니까?

지금 해야 할 일은 매우 간단합니다. Promise를 사용하여 콜백이 포함된 함수 호출 본문을 래핑하는 것입니다. 예:

콜백 스타일 코드는 다음과 같습니다.

function saveToTheDb(value) { 
  db.values.insert(value, function (err, user) { 
    if (err) throw err; 
 
    // todo: insert user to db 
  }); 
} 

이제 Promise 스타일 호출을 지원하는 코드로 변경합니다.

function saveToTheDb(value) {  
  return new Promise(function(resolve, reject) { 
    db.values.insert(value, function(err, user) { // remember error first ;) 
      if (err) { 
        return reject(err); // don't forget to return here 
      } 
      resolve(user); 
    }) 
  } 
} 

상당수의 라이브러리 또는 프레임워크는 이미 두 가지 방법을 모두 지원합니다. 즉, 콜백 스타일과 Promise 스타일 API 인터페이스를 모두 제공합니다. 따라서 이제 외부 세계에도 라이브러리를 제공하려는 경우 두 인터페이스를 동시에 제공하는 것이 가장 좋습니다. 이 목적을 달성하려면 다음 방법을 쉽게 사용할 수 있습니다.

function foo(cb) {  
 if (cb) { 
  return cb(); 
 } 
 return new Promise(function (resolve, reject) { 
 
 }); 
} 

或者更简单些，你可以从只提供Promise风格的接口开始后，并使用诸如 callbackify这样的工具来达到向后兼容的目的。其实Callbackify所做的工作和上面的代码片段类似，但在实现上使用了一个更通用的方法， 我建议你可以去阅读Callbackify的源代码。

生成器Generators/ yield

JavaScript 生成器是个相对较新的概念， 它是ES6（也被称为ES2015）的新特性。想象下面这样的一个场景：

当你在执行一个函数的时候，你可以在某个点暂停函数的执行，并且做一些其他工作，然后再返回这个函数继续执行， 甚至是携带一些新的值，然后继续执行。
上面描述的场景正是JavaScript生成器函数所致力于解决的问题。当我们调用一个生成器函数的时候，它并不会立即执行， 而是需要我们手动的去执行迭代操作（next方法）。也就是说，你调用生成器函数，它会返回给你一个迭代器。迭代器会遍历每个中断点。

function* foo () {  
 var index = 0; 
 while (index < 2) { 
  yield index++; //暂停函数执行，并执行yield后的操作 
 } 
} 
var bar = foo(); // 返回的其实是一个迭代器 
console.log(bar.next());  // { value: 0, done: false }  
console.log(bar.next());  // { value: 1, done: false }  
console.log(bar.next());  // { value: undefined, done: true } 

 更进一步的，如果你想更轻松的使用生成器函数来编写异步JavaScript代码，我们可以使用 co 这个库，co是著名的tj大神写的。

Co是一个为Node.js和浏览器打造的基于生成器的流程控制工具，借助于Promise，你可以使用更加优雅的方式编写非阻塞代码。
使用co，前面的示例代码，我们可以使用下面的代码来改写：

co(function* (){  
 yield Something.save(); 
}).then(function() { 
 // success 
}) 
.catch(function(err) { 
 //error handling 
}); 

你可能会问：如何实现并行操作呢？答案可能比你想象的简单，如下（其实它就是Promise.all而已）：

yield [Something.save(), Otherthing.save()];  
Async/ await

在ES7（还未正式标准化）中引入了Async函数的概念，目前如果你想要使用的话，只能借助于babel 这样的语法转换器将其转为ES5代码。（提醒一点：我们现在讨论的是async关键字，而不是NPM中的async包）。

简而言之，使用async关键字，你可以轻松地达成之前使用生成器和co函数所做到的工作。当然，除了hack之外。

也许你会问，是否在ES7中有了async关键字，yield就变得不是那么重要了？

实际上，使用yield实现异步也不过是一种hack罢了，yield意味着懒次序（lazy sequences）和迭代器。 而await能够完美的分离这两点，首先让yield用于其最初的目的，其次使用await来执行异步操作。

在这背后，async函数实际使用的是Promise，也就是为什么async函数会返回一个Promise的原因。

因此，我们使用async函数来完成类似于前面代码所完成的工作，可以使用下面这样的方式来重新编写代码：

async function save(Something) {  
 try { 
  await Something.save(); // 等待await后面的代码执行完，类似于yield 
 } catch (ex) { 
  //error handling 
 } 
 console.log('success'); 
} 

正如你看到的那样，使用async函数，你需要在函数声明的最前面加上async关键字。这之后，你可以在函数内部使用await关键字了，作用和之前的yield作用是类似的。

使用async函数完成并行任务与yiled的方式非常的相似，唯一不同的是，此时Promise.all不再是隐式的，你需要显示的调用它：

async function save(Something) {  
  await Promise.all[Something.save(), Otherthing.save()] 
} 

Koa也支持async函数，如果你也在使用koa，那么你现在就可以借助babel使用这一特性了。

import koa from koa;  
let app = koa(); 
app.experimental = true; 
app.use(async function (){  
  this.body = await Promise.resolve('Hello Reader!') 
}) 
app.listen(3000);  

以上内容给大家分享了JavaScript异步函数发展历程，希望对大家有所帮助。