在express中使用async middleware

简介: ## 普通middleware ``` const express = require('express') const app = express() const port = 3000 app.use('/normal', (req, res) => res.send('Hello World!')) app.listen(port, () => console.log

普通middleware

const express = require('express')
const app = express()
const port = 3000

app.use('/normal', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

文艺middleware (async)

const express = require('express')
const app = express()
const port = 3000

app.use('/art', async (req, res) => {
  await new Promise((resolve, reject) => {
    setTimeout(resolve, 1000)
  })
  res.send('Bonjour le monde!')
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

万一middleware里报错了怎么办

增加一个4参数的中间件作为error handler,当然express也有一个默认的handler

const express = require('express')
const app = express()
const port = 3000

app.use('/normal', (req, res) => res.send('Hello World!'))
app.use('/normal-error', (req, res, next) => {
  throw new Error('some error')
})

app.use((err, req, res, next) => res.send('error detected: ' +  err.message))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

async middleware里的报错也这么处理?

答案是No

const express = require('express')
const app = express()
const port = 3000

app.use('/art', async (req, res) => {
  await new Promise((resolve, reject) => {
    setTimeout(resolve, 1000)
  })
  res.send('Bonjour le monde!')
})
app.use('/2b-error-1', async (req, res) => {
  await new Promise((resolve, reject) => {
    setTimeout(() => reject('another error 1'), 1000)
  })
})
app.use('/2b-error-2', async (req, res) => {
  await Promise.resolve().then(() => {
    throw new Error('another error 2')
  })
})

app.use((err, req, res, next) => res.send('error detected: ' +  err.message))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

如果只这样写的话,浏览器里不会有任何返回,而你会在终端里得到下面的报错:
image.png

image.png

正确处理async middleware里的报错

const express = require('express')
const app = express()
const port = 3000

app.use('/art', async (req, res) => {
  await new Promise((resolve, reject) => {
    setTimeout(resolve, 1000)
  })
  res.send('Bonjour le monde!')
})
app.use('/art-error-1', async (req, res, next) => {
  try {
    await new Promise((resolve, reject) => {
      setTimeout(() => reject(new Error('another error 1')), 1000)
    })
  } catch (e) {
    next(e)
  }
})
app.use('/art-error-2', async (req, res, next) => {
  await Promise.resolve().then(() => {
    throw new Error('another error 2')
  }).catch(next)
})

app.use((err, req, res, next) => res.send('error detected: ' +  err.message))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

处理的办法就是catch住异步操作中可能会抛出的错误,这里其实没有新的内容,在express的文档里已经说了必须捕获异步操作中的错误:

You must catch errors that occur in asynchronous code invoked by route handlers or middleware and pass them to Express for processing.

每个异步操作都如此try/catch,太麻烦了

解决办法是写一个高阶函数asyncMiddleware,在这个函数里面给传进来的middleware自动加上catch方法。

const express = require('express')
const app = express()
const port = 3000

app.use('/art', async (req, res) => {
  await new Promise((resolve, reject) => {
    setTimeout(resolve, 1000)
  })
  res.send('Bonjour le monde!')
})

// 重点
function asyncMiddleware(fn) {
  return (req, res, next) => fn(req, res, next).catch(next)
}
app.use('/art-error-1', asyncMiddleware(async (req, res, next) => {
  await new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('another error 1')), 1000)
  })
}))
app.use('/art-error-2', asyncMiddleware(async (req, res, next) => {
  await Promise.resolve().then(() => {
    throw new Error('another error 2')
  })
}))

app.use((err, req, res, next) => res.send('error detected: ' +  err.message))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

如果不确定参数是否一定为async function,可以使用Promise.resolve(fn(req, res, next))

相关文章
|
2月前
|
前端开发 JavaScript
如何让React中useEffet支持async/await
如何让React中useEffet支持async/await
25 0
|
3月前
|
消息中间件 中间件 API
什么是 Koa2?它与 Express 有什么区别?
什么是 Koa2?它与 Express 有什么区别?
98 0
|
3月前
|
JavaScript 前端开发
如何在 TypeScript 中使用 async/await?
如何在 TypeScript 中使用 async/await?
24 0
|
8月前
|
开发框架 JavaScript 前端开发
koa和express有哪些不同?
koa和express有哪些不同?
65 1
|
4月前
【Express】—Express路由请求
【Express】—Express路由请求
|
4月前
【Express】—post传递参数
【Express】—post传递参数
使用express-generator生成express应用
使用express-generator生成express应用
36 0
|
前端开发 JavaScript 中间件
express VS koa
express 出来的时候,js 还是处于混沌期间,es6的标准没有出来。而node的事件处理的方式都是基于 cb(callback) 的这种形式,在当时来看,这种方式是比较好的一种方式。所以express 里面的中间件处理的方式基本上都是回调。es6 的出现,带来了许多新的标准。使得express 不得不考虑需要兼容es6中的语法, 而 es6中处理异步的方式是promise,还有后面陆续的 async 和 await 等语法糖。(express 不是说不能使用这些语法糖,他使用第三方的库是可以解决的,只是没有koa那么优雅)
express VS koa
|
前端开发
你需要了解的ES7的async/await
你需要了解的ES7的async/await
|
前端开发 JavaScript
Alamofire Async Await
Alamofire Async Await