>  기사  >  웹 프론트엔드  >  익스프레스 개발 이력

익스프레스 개발 이력

巴扎黑
巴扎黑원래의
2017-09-11 10:09:282079검색

이 글은 주로 Express의 비동기 진화 역사에 대한 간략한 논의를 소개합니다. 편집자는 그것이 꽤 좋다고 생각하므로 이제 공유하고 참고용으로 제공하겠습니다. 편집기를 따라 살펴보겠습니다

1. 소개

Javascript의 세계에서는 비동기(JavaScript가 단일 스레드에서 실행되므로 JavaScript의 비동기가 차단될 수 있음)는 어디에나 있습니다.

Express는 노드 환경에서 매우 인기 있는 웹 서버 프레임워크입니다. 많은 비율의 Node 웹 애플리케이션이 Express를 사용합니다.

JavaScript로 서버측 코드를 작성할 때 필연적으로 비동기를 많이 사용하게 됩니다. JavaScript와 Node가 발전함에 따라 비동기 처리 방법도 발전할 것입니다.

다음으로 Express에서 비동기 처리의 진화를 살펴보겠습니다.

2. JavaScript의 비동기 처리

비동기 세계에서는 비동기 메서드 완료 알림을 받는 방법을 찾아야 합니다. 그러면 JavaScript에서는 어떤 방법이 있을까요?

2.1. 콜백

콜백은 JS에서 가장 독창적이고 가장 오래된 비동기 알림 메커니즘입니다.


function asyncFn(callback) {
 // 利用setTimeout模拟异步
 setTimeout(function () {
  console.log('执行完毕');
  callback(); // 发通知
 }, 2000);
}

asyncFn(function () {
 console.log('我会在2s后输出');
});

2.2.이벤트 모니터링

결과를 받아보는 기능, 일정 시간 동안 들어보세요. 비동기 메서드가 완료된 후 이벤트가 트리거되어 알림 효과를 얻습니다.

2.3. 게시/구독

비동기적으로 완료되면 관찰자 패턴을 사용하여 게시자를 수정합니다. 이때 게시자는 구독자에게 변경 사항을 알립니다.

2.4, Promise

Promise는 콜백 기능을 개선한 것입니다. 이를 사용하면 비동기를 병렬화하고 콜백 지옥을 피할 수 있습니다.


function asyncFn() {
 return new Promise((resolve, reject) => {
  // 利用setTimeout模拟异步
  setTimeout(function () {
   console.log('执行完毕');
   resolve(); // 发通知(是否有感觉到回调的影子?)
  }, 2000);
 });
}

asyncFn()
 .then(function () {
  console.log('我会在2s后输出');
 });

2.5, Generator

Generator 함수는 ES6에서 제공하는 비동기 프로그래밍 솔루션입니다.

다음 코드는 단순한 데모일 뿐입니다. 실제로 Generator의 사용 과정은 상대적으로 복잡하므로 이 기사에서는 다루지 않습니다.


function asyncFn() {
 return new Promise((resolve, reject) => {
  // 利用setTimeout模拟异步
  setTimeout(function () {
   console.log('执行完毕');
   resolve(); // 发通知(是否有感觉到回调的影子?)
  }, 2000);
 });
}

function* generatorSync() {
 var result = yield asyncFn();
}

var g = generatorSync();
g.next().value.then(()=>{
 console.log('我会在2s后输出');
});

2.6, async...await

은 현재 JavaScript에서 비동기 처리를 위한 최고의 솔루션이라고 할 수 있습니다.


function asyncFn() {
 return new Promise((resolve, reject) => {
  // 利用setTimeout模拟异步
  setTimeout(function () {
   console.log('执行完毕');
   resolve(); // 发通知(是否有感觉到回调的影子?)
  }, 2000);
 });
}

async function run(){
 await asyncFn();
 console.log('我会在2s后输出');
}

run();

3. Express의 비동기 처리

Express에서 일반적으로 사용되는 솔루션은 콜백 함수, Promise 및 async...await입니다.

데모 환경을 구축하려면 express-generator를 통해 express 프로젝트를 초기화하세요. 일반적으로 서버 측 프로젝트는 경로를 사용하여 비즈니스 로직을 호출합니다. 따라서 우리는 다음 원칙도 따릅니다.

routs/index.js를 열면 다음 내용을 볼 수 있습니다. 다음 데모에서는 이 파일을 데모용으로 사용합니다.


var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('index', { title: 'Express' });
});

module.exports = router;

3.1. 콜백 함수는 Express 비동기 로직을 ​​처리합니다

Express에서는 경로가 여러 미들웨어를 로드할 수 있으므로 미들웨어 작성 방법에 따라 비즈니스 로직을 작성할 수 있습니다. 이러한 방식으로 비동기 로직은 다음 레이어를 통해 매우 편리하게 분할될 수 있습니다.


var express = require('express');
var router = express.Router();

function asyncFn(req, res, next) {
 setTimeout(() => {
  req.user = {}; // 设置当前请求的用户
  next();
 }, 2000);
}

function asyncFn2(req, res, next) {
 setTimeout(() => {
  req.auth = {}; // 设置用户权限
  next();
 }, 2000);
}

function asyncFn3(req, res, next) {
 setTimeout(() => {
  res.locals = { title: 'Express Async Test' }; // 设置数据
  res.render('index'); // 响应
 }, 2000);
}

/* GET home page. */
router.get('/', asyncFn, asyncFn2, asyncFn3); // 一步步执行中间件

module.exports = router;

3.2. Promise 처리 Express 비동기 로직

이 솔루션에서는 여러 비즈니스 로직이 Promise를 반환하는 함수로 패키징됩니다. 비즈니스 방식을 통해 통합 통화를 하여 일인, 일 아웃의 효과를 얻으세요.


var express = require('express');
var router = express.Router();

function asyncFn(req, res) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   req.user = {}; // 设置当前请求的用户
   resolve(req);
  }, 2000);
 });
}

function asyncFn2(req) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   req.auth = {}; // 设置用户权限
   resolve();
  }, 2000);
 });
}

function asyncFn3(res) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   res.locals = { title: 'Express Async Test' }; // 设置数据
   res.render('index'); // 响应
  }, 2000);
 });
}

function doBizAsync(req, res, next) {
 asyncFn(req)
  .then(() => asyncFn2(req))
  .then(() => asyncFn3(res))
  .catch(next); // 统一异常处理
};

/* GET home page. */
router.get('/', doBizAsync);

module.exports = router;

3.3.async...await가 Express 비동기 로직을 ​​처리합니다

사실 이 솔루션에도 Promise 지원이 필요하지만 작성 방법이 더 직관적이고 오류 처리가 더 직접적입니다.

Express는 초기 솔루션이며 async...await에 대한 전역 오류 처리 기능이 없으므로 패키징을 사용하여 처리할 수 있습니다.


var express = require('express');
var router = express.Router();

function asyncFn(req) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   req.user = {}; // 设置当前请求的用户
   resolve(req);
  }, 2000);
 });
}

function asyncFn2(req) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   req.auth = {}; // 设置用户权限
   resolve();
  }, 2000);
 });
}

function asyncFn3(res) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {

  }, 2000);
 });
}

async function doBizAsync(req, res, next) {
 var result = await asyncFn(req);
 var result2 = await asyncFn2(req);
 res.locals = { title: 'Express Async Test' }; // 设置数据
 res.render('index'); // 响应
};

const tools = {
 asyncWrap(fn) {
  return (req, res, next) => {
   fn(req, res, next).catch(next); // async...await在Express中的错误处理
  }
 }
};

/* GET home page. */
router.get('/', tools.asyncWrap(doBizAsync)); // 需要用工具方法包裹一下

module.exports = router;

4. 요약

koa는 더 새롭고 더 나은 사용법을 지원하지만(koa는 생성기, koa2 기본 비동기). 하지만 node 0.x로 작업을 시작한 사람으로서 저는 여전히 Express를 특별히 좋아합니다.

위 솔루션 중 일부는 이미 Koa에서 사용되고 있으며 Express의 거대한 생태계와 결합되어 더욱 강력해졌습니다.

이 글의 Github 주소

위 내용은 익스프레스 개발 이력의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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