찾다
웹 프론트엔드JS 튜토리얼NodeJs는 async 및 wait를 통해 비동기 메서드를 처리합니다.

Express 백엔드를 작성할 때 많은 비동기 IO를 처리해야 하는 경우가 많습니다. 고대에는 우리 모두가 Chunk 함수를 사용했습니다. 이 함수는 기본 첫 번째 매개변수가 error인 가장 친숙한 함수입니다. Mongo 데이터베이스의 작동을 시뮬레이션하고 이에 대한 느낌을 살펴보겠습니다. error的函数。我们来模拟一个Mongo数据库的操作,感受一下。

本文主要介绍NodeJs通过async/await处理异步的方法,内容挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家。


mongoDb.open(function(err, db){
  if(!err){
    db.collection("users", function(err, collection){
      if(!err){
        let person = {name: "yika", age: 20};
        collection.insert(person, function(err, result){
          if(!err){
            console.log(result);
          }
        });
      }
    })
  }
});

这个也就是被我们所诟病的callback hell,一堆横向金字塔,如果将回调拆分成函数,则会变得非常支离破碎。为了防止到恶心到大家,我甚至没有写关于错误的处理,正常来说,每一个异步的操作都需要都它的error进行相应的显示或处理的。

Promise时代

后来进入了好一点的时代就是Promise,我们也可以称作链式操作。关于Promise,我也是之前有专门写过一系列的博文,有兴趣可以回头翻一下。这里来看看,将以上改写之后的状况。


let person = {name: "yika"};
mongoDb
  .open()
  .then(function(database){
   return database.collection("users");
  })
  .then(function(collection){
   return collection.insert(person);
  })
  .then(function(result){
   console.log(result);
  })
  .catch(function(e){
   throw new Error(e);
  })

我们可以看到,我们将金字塔已经平铺成一条线状结构了。相比之前恶心难以维护的chunk函数,变成了promise函数,并且错误的处理也变得十分优雅。但是我们仍然不可忽视某些问题,例如我们必须忍受各个逻辑被一个又一个的then()包裹起来,每一个函数都有其独立的作用域,如果为了共享某个数据就必须挂在最外层,最重要的还是,它与我们熟悉的同步编程仍然有差别。

Generator时代

TJ大神,借着ES6的Generator迭代器,最早实现了异步编程同步化的功能,也就是最为我们所熟知的co库。我们通过co(function *(){})可以使函数内部通过迭代器来控制。而co在这里则是充当了启动器的角色。关于Generator和co我在之前的博文也同样说过。


let co = require("co");

co(function *(){
  let db, collection, result; 
  let person = {name: "yika"};
  try{
    db = yield mongoDb.open();
    collection = yield db.collection("users");
    result = yield collection.insert(person);
  }catch(e){
    console.error(e.message);
  }
  console.log(result);
});

我们已经非常接近同步编程了,在co包裹的函数内部,只有一个异步执行完毕,才会继续执行下面的代码。并且错误的处理也是通过try and catch进行实现的。不过我们不得不承认的是,迭代器终究不是为异步而存在的。里面的yield*的语义也并不代表的就是异步函数标志。并且迭代器是需要co去驱动的,它和我们想象中的函数多少有一点点不同。

async/await时代

我们关注到ES7的async/await,才发现这才是我们想要的!我们将上面的代码小小改写一下。


async function insertData(person){
  let db, collection, result; 
  try{
    db = await mongoDb.open();
    collection = await db.collection("users");
    result = await collection.insert(person);
  }catch(e){
    console.error(e.message);
  }
  console.log(result);
} 

insertData({name: "yika"});

我们可以看到inserData是一个真正的函数,是我们可以直接去调用而无需启动器驱动的。当然内部我们也可以感受到处理yield变成了await

이 기사는 주로 NodeJ가 async/await를 통해 비동기 처리를 처리하는 방법을 소개합니다. 이제 내용이 꽤 좋아 여러분에게 도움이 되기를 바랍니다.

$ npm install babel-core --save
$ npm install babel-preset-es2015 --save
$ npm install babel-preset-stage-3 --save
이것이 우리가 수평 피라미드 무리인 콜백 지옥을 비판한 것입니다. 콜백이 함수로 분할되면 매우 조각화됩니다. 모든 사람이 혐오감을 느끼는 것을 방지하기 위해 오류 처리에 대해서는 글도 쓰지 않았습니다. 일반적으로 모든 비동기 작업은 그에 따라 오류를 표시하거나 처리해야 합니다.


Promise Era


이후 우리는 체인 운영이라고도 할 수 있는 더 나은 Promise 시대를 맞이했습니다. Promise에 관해서는 이전에 일련의 블로그 게시물을 작성한 적이 있습니다. 관심이 있으시면 다시 읽어보실 수 있습니다. 위의 내용을 다시 작성한 후 상황을 살펴보겠습니다.

// webpack.config.js
// 省略上面的文件输入输出的配置,直接看模块加载器的配置
module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: "babel",
      query: {
       presets: ['es2015', 'stage-3']
      }
    },
  ]
}

피라미드를 선형 구조로 편평화한 것을 볼 수 있습니다. 역겹고 유지 관리가 어려웠던 이전 청크 함수에 비해 약속 함수가 되었으며 오류 처리가 매우 우아해졌습니다. 하지만 여전히 특정 문제를 무시할 수는 없습니다. 예를 들어, 각 함수는 특정 데이터를 공유하기 위해 자신만의 독립적인 범위를 가지고 있습니다. 가장 바깥쪽 레이어에 매달려 있어야 합니다. 가장 중요한 것은 우리가 익숙한 동기식 프로그래밍과 여전히 다르다는 것입니다.

Generator 시대

Master TJ는 ES6의 Generator Iterator를 통해 가장 잘 알려진 co 라이브러리인 비동기 프로그래밍의 동기화 기능을 최초로 구현했습니다. co(function *(){})를 사용하여 반복자를 통해 내부적으로 함수를 제어할 수 있습니다. 그리고 여기서는 co가 런처 역할을 합니다. 나는 이전 블로그 게시물에서 Generator와 Co에 대해 동일한 말을 했습니다.

// index.js 
// 用于引入babel,并且启动app.js

require("babel-core/register");
require("./app.js");

co로 래핑된 함수 내에서는 다음 코드가 계속 실행되기 전에 단 하나의 비동기 실행만 완료됩니다. 그리고 오류 처리도 try and catch를 통해 구현됩니다. 그러나 우리가 인정해야 할 것은 결국 비동기성을 위한 반복자가 존재하지 않는다는 것입니다. yield*의 의미는 비동기 함수 플래그를 나타내지 않습니다. 그리고 반복자는 co에 의해 구동되어야 하는데, 이는 우리가 상상했던 함수와 조금 다릅니다.

async/await 시대


우리는 ES7의 async/await에 주의를 기울였지만 이것이 우리가 원하는 것임을 알게 되었습니다! 위의 코드를 살짝 다시 작성해 보겠습니다.


🎜🎜
{
 "presets": ["stage-3", "es2015"]
}
🎜 inserData가 런처 드라이버 없이 직접 호출할 수 있는 실제 함수임을 알 수 있습니다. 물론 내부적으로도 yield의 처리가 await가 되는 것 외에는 큰 차이가 없다고 느낄 수도 있습니다. async/await는 비동기 프로그래밍의 의미에 더 가깝습니다. 🎜🎜그럼 질문은 어떻게 사용하느냐 입니다. 🎜🎜🎜사용 🎜🎜🎜처음부터 babel이 async Transform을 지원한다고 했으니 사용할 때 babel만 도입하면 됩니다. 물론, 서버 측과 브라우저 측의 처리 방법이 다를 수 있습니다. 시작하기 전에 필요한 async/await 컴파일 파일이 포함된 다음 패키지를 소개해야 합니다. 🎜🎜🎜🎜🎜rrreee🎜🎜브라우저 측🎜🎜🎜Babel은 원래 오래된 브라우저가 새로운 ES6 기능을 지원하고 개발 경험을 향상시킬 수 있도록 등장했습니다. 그래서 Babel은 처음부터 babel-cli 터미널을 통해 컴파일이 가능합니다. 또는 브라우저 측에서 컴파일할 바벨 파일을 도입하세요. 물론 이것들은 제가 가장 추천하는 것들이 아니므로 그냥 생략하겠습니다. 프런트엔드 정적 리소스 구성에서는 webpack이 현재 더 나은 솔루션입니다. 이는 정적 리소스의 모듈 종속성, 패키징 및 병합, 언어 전처리를 지원합니다. 물론 여기서는 바벨 처리를 참조합니다. 🎜🎜🎜🎜🎜rrreee🎜그래서 우리가 즐겁게 사용할 수 있어요. 🎜🎜🎜서버 측🎜🎜🎜상대적으로 말하면 백엔드는 프런트엔드보다 훨씬 더 많은 비동기 IO를 처리해야 하며 이 또한 더 필요합니다. 그렇다면 서버 측에 바벨을 어떻게 도입할까요? 🎜🎜사실 가장 간단하면서도 가장 번거로운 방법은 js 파일을 Babel을 통해 직접 컴파일해서 새 파일을 생성한 후 사용하는 것입니다. 물론 중복된 파일은 불가피합니다. 눈에 띄지 않게, 다른 방법을 시도해 보겠습니다. 🎜🎜공식적으로 제공되는 require Hook 방식을 사용합니다. 이름에서 알 수 있듯이 require를 통해 들어온 후 필요할 때 다음 파일을 Babel에서 처리합니다. CommonJs가 동기식 모듈 종속성이라는 것을 알고 있기 때문에 실행 가능한 방법이기도 합니다. 시작을 위해서는 실제로 프로그램을 실행하는 js 파일이 하나 더 필요합니다. 🎜🎜🎜🎜🎜
// index.js 
// 用于引入babel,并且启动app.js

require("babel-core/register");
require("./app.js");

配置完hook之后,我们就配置babel的.babelrc文件,它是一个json格式的文件。es2015看情况配置,如果是已经是Node5.0版本,就无需再进行编译。


{
 "presets": ["stage-3", "es2015"]
}

最后我们的异步函数代码,写在app.js里即可。

相关推荐:

小程序开发之利用co处理异步流程的实例教程

如何处理异步队列出错?

以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题_jquery

위 내용은 NodeJs는 async 및 wait를 통해 비동기 메서드를 처리합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript, C 및 브라우저의 관계JavaScript, C 및 브라우저의 관계May 01, 2025 am 12:06 AM

서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr

Node.js는 TypeScript가있는 스트림입니다Node.js는 TypeScript가있는 스트림입니다Apr 30, 2025 am 08:22 AM

Node.js는 크림 덕분에 효율적인 I/O에서 탁월합니다. 스트림은 메모리 오버로드를 피하고 큰 파일, 네트워크 작업 및 실시간 애플리케이션을위한 메모리 과부하를 피하기 위해 데이터를 점차적으로 처리합니다. 스트림을 TypeScript의 유형 안전과 결합하면 Powe가 생성됩니다

Python vs. JavaScript : 성능 및 효율성 고려 사항Python vs. JavaScript : 성능 및 효율성 고려 사항Apr 30, 2025 am 12:08 AM

파이썬과 자바 스크립트 간의 성능과 효율성의 차이는 주로 다음과 같이 반영됩니다. 1) 해석 된 언어로서, 파이썬은 느리게 실행되지만 개발 효율이 높고 빠른 프로토 타입 개발에 적합합니다. 2) JavaScript는 브라우저의 단일 스레드로 제한되지만 멀티 스레딩 및 비동기 I/O는 Node.js의 성능을 향상시키는 데 사용될 수 있으며 실제 프로젝트에서는 이점이 있습니다.

JavaScript의 기원 : 구현 언어 탐색JavaScript의 기원 : 구현 언어 탐색Apr 29, 2025 am 12:51 AM

JavaScript는 1995 년에 시작하여 Brandon Ike에 의해 만들어졌으며 언어를 C로 실현했습니다. 1.C Language는 JavaScript의 고성능 및 시스템 수준 프로그래밍 기능을 제공합니다. 2. JavaScript의 메모리 관리 및 성능 최적화는 C 언어에 의존합니다. 3. C 언어의 크로스 플랫폼 기능은 자바 스크립트가 다른 운영 체제에서 효율적으로 실행하는 데 도움이됩니다.

무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?Apr 28, 2025 am 12:01 AM

JavaScript는 브라우저 및 Node.js 환경에서 실행되며 JavaScript 엔진을 사용하여 코드를 구문 분석하고 실행합니다. 1) 구문 분석 단계에서 초록 구문 트리 (AST)를 생성합니다. 2) 컴파일 단계에서 AST를 바이트 코드 또는 기계 코드로 변환합니다. 3) 실행 단계에서 컴파일 된 코드를 실행하십시오.

파이썬과 자바 스크립트의 미래 : 트렌드와 예측파이썬과 자바 스크립트의 미래 : 트렌드와 예측Apr 27, 2025 am 12:21 AM

Python 및 JavaScript의 미래 추세에는 다음이 포함됩니다. 1. Python은 과학 컴퓨팅 분야에서의 위치를 ​​통합하고 AI, 2. JavaScript는 웹 기술의 개발을 촉진하고, 3. 교차 플랫폼 개발이 핫한 주제가되고 4. 성능 최적화가 중점을 둘 것입니다. 둘 다 해당 분야에서 응용 프로그램 시나리오를 계속 확장하고 성능이 더 많은 혁신을 일으킬 것입니다.

Python vs. JavaScript : 개발 환경 및 도구Python vs. JavaScript : 개발 환경 및 도구Apr 26, 2025 am 12:09 AM

개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.

JavaScript가 C로 작성 되었습니까? 증거를 검토합니다JavaScript가 C로 작성 되었습니까? 증거를 검토합니다Apr 25, 2025 am 12:15 AM

예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기