In part 2, We applied the middleware pattern for our web framework, which make us able to execute how many middlewares that we want for a route.
Today We are going to create Decorators for our Request and Response objects, applying the decorator and middleware pattern together to get parameters and query strings from the URL, also create helper functions to respond to the requests as a JSON transformer, for example.
Let's go!
Request Decorator
src/request.js
const { match } = require('path-to-regexp') const RequestDecorator = (routes, request, response, next) => { // (1) const getParams = () => { const urlParams = request.url.split('/').slice(1) // remove querystrings from the last parameter const [lastParam] = urlParams[urlParams.length - 1].split('?') urlParams.splice(urlParams.length - 1, 1) // joining all params without querystrings const allParams = [...urlParams, lastParam].join('/') // matching url pattern to get the params for (const path of routes) { const urlMatch = match(path, { decode: decodeURIComponent, }); const url = `/${allParams}/${request.method.toUpperCase()}` const found = urlMatch(url) if (found) { Object.keys(found.params).forEach(key => { request.params = { ...request.params, [key]: found.params[key] } }) break } } } // (2) const getQuery = () => { const urlParams = request.url.split('/').slice(1) // Isolating query strings const [lastParam, queryString] = urlParams[urlParams.length - 1].split('?') let params = new URLSearchParams(queryString); let entries = params.entries(); request.query = { ...request.query, ...Object.fromEntries(entries) } } getParams() getQuery() next() } module.exports = RequestDecorator From the code sessions above:
1 - Treating the URL to compare with the existent routes and get the parameters and set the request object.
2 - Transforming the query string into an object and setting the request object.
Response Decorator
src/response.js
const ResponseDecorator = (req, res, next) => { // (1) res.status = (status) => { res.statusCode = status return res } // (2) res.json = (data) => { res.setHeader('Content-type', 'application/json') res.end(JSON.stringify(data)) } // (3) res.send = async (data) => { res.end(data) } res.render = async (templatePath, data) => { // We are going to implement it later } next() } module.exports = ResponseDecorator From the code sessions above:
1 - Changing the status code and returning the response object, to set the status and response in one line.
2 - Transforming the response into JSON.
3 - Send a text to the client.
Applying Decorators as Middlewares
src/app.js
We need to import our two decorators:
const requestDecorator = require('./request') const responseDecorator = require('./response') Now, We have to modify our serverHandler function to apply the decorators as middlewares for all routes.
const serverHandler = async (request, response) => { const sanitizedUrl = sanitizeUrl(request.url, request.method) const match = matchUrl(sanitizedUrl) if (match) { const middlewaresAndControllers = routes.get(match) await dispatchChain(request, response, [requestDecorator.bind(null, routes.keys()), responseDecorator, ...middlewaresAndControllers]) } else { response.statusCode = 404 response.end('Not found') } } Testing
index.js
// (1) app.get('/params/:id/:name', (req, res) => { res.end(JSON.stringify({ params: req.params, query: req.query }, null, 2)) }) // (2) app.get('/response/:id', (req, res) => { if (req.params.id === '123') { res.status(200).json(req.params) return } res.status(400).json({ message: 'Invalid id' }) }) From the code sessions above:
1 - Returning the parameters and query strings from the URL as text.
2 - Here is an example of how you can return JSON and change the status code at the same time.
Conclusion
Using the same that We use for middlewares, we can treat the resquest and response and make them fancier.
You can take a look at the entire code here
I hope you like it.
Top comments (1)
Nice bro