Request Payload
So we talked in our lesson about request data types and we saw the request url data in action, now let"s see how we can get the request payload data.
Request Body
The request body is the data that we send to the server in the request body, it can be in the form of JSON, XML, or any other format.
Testing Request Body
Now we need to try the request body in action, but request body (payload) can only be available in POST, PUT, PATCH, and DELETE requests.
So to try this we can use Postman, and we can send a request body in the body tab.
Just download and install it in your computer, now let"s open it.
Postman
Once you"re ready with postman, create a new collection and name it Ninja Node
, then create a new request and add to it the following url http://localhost:3000/users
with request method POST
.
Now let"s head to our users
module and create a create-user
controller
// src/app/users/controllers/create-user.ts
export default function createUser(request: any) {
return request.body;
}
Now let"s import the controller in our users
module and add it to the routes
// src/app/users/routes.ts
import router from "core/router";
import createUser from "./controllers/create-user";
router.post("/users", createUser);
Now let"s head to postman and send a request, click on the Body
tab then select raw
then select type JSON
, in the text input add the following code
{
"name": "John Doe",
"age": 30
}
Now click on the Send
button, you should get the following response
{
"name": "John Doe",
"age": 30
}
And that"s it!
Uploading Files and Form Data
As we mentioned earlier, the request payload (body) can be json or a form data, the form data type will be the one we use to upload files to the server, but we need first to add a package to handle this for use, therefore we"ll use fastify-multipart.
Installing fastify-multipart
To install fastify-multipart, run the following command
yarn add @fastify/multipart
Now let"s register the plugin in our core/application.ts
file
// src/core/application.ts
// 👇🏻 Import the plugin
import multipart from "@fastify/multipart";
import Fastify from "fastify";
import router from "./router";
export default async function startApplication() {
const server = Fastify();
// 👇🏻 Add the following code
server.register(multipart, {
attachFieldsToBody: true,
});
router.scan(server);
try {
// 👇🏻 We can use the url of the server
const address = await server.listen({ port: 3000 });
console.log(`Start browsing using ${address}`);
} catch (err) {
server.log.error(err);
process.exit(1); // stop the process, exit with error
}
}
Now let"s move back to postman and this time we"ll select the form-data
type, then add the following fields
-
name
with valueJohn Doe
-
age
with value30
-
file
: typefile
and select a file
Open the createUser
controller and now we"ll need to console log the request body to see what we get
// src/app/users/controllers/create-user.ts
export default function createUser(request: any) {
console.log(request.body);
return {
done: true
}
}
You should see something like this in your console
{
"name": "John Doe",
"age": 30,
"file": {
"fieldname": "file",
"filename": "3- Create New Project.png",
"encoding": "7bit",
"mimetype": "image/png",
"file": "FileStream" {
_readableState: [ReadableState],
_events: [Object: null prototype],
_eventsCount: 5,
_maxListeners: undefined,
bytesRead: 667277,
truncated: false,
_read: [Function (anonymous)],
[Symbol(kCapture)]: false
},
fields: [Circular *1],
_buf: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 05 00 00 00 02 d0 08 06 00 00 00 cf 7d dd 56 00 00 00 09 70 48 59 73 00 00 0e c4 00 00 0e
c4 01 ... 667227 more bytes>,
toBuffer: [AsyncFunction: toBuffer]
},
name: {
fieldname: "name",
mimetype: "text/plain",
encoding: "7bit",
value: "hasan",
fieldnameTruncated: false,
valueTruncated: false,
fields: [Circular *1]
}
}
Now we're totally fine with the request body, all set and clear.
Conclusion
In this lesson we learned how to get the request payload data, we saw how to get the request body data and how to get the form data and files.
🎨 Project Repository
You can find the latest updates of this project on Github
😍 Join our community
Join our community on Discord to get help and support (Node Js 2023 Channel).
🎞️ Video Course (Arabic Voice)
If you want to learn this course in video format, you can find it on Youtube, the course is in Arabic language.
💰 Bonus Content 💰
You may have a look at these articles, it will definitely boost your knowledge and productivity.
General Topics
- Event Driven Architecture: A Practical Guide in Javascript
- Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript
- After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL -
Packages & Libraries
- Collections: Your ultimate Javascript Arrays Manager
- Supportive Is: an elegant utility to check types of values in JavaScript
- Localization: An agnostic i18n package to manage localization in your project
React Js Packages
Courses (Articles)
Top comments (0)