Name: Process Incoming Request Data Using the Request Class in Workers
Uploaded: 2021-03-02T17:07:36-06:00
Description: In this lesson, we'll explore the Request class in Workers, and how it can be used to handle incoming data sent to an API. We'll also use a command-line tool to simulate how our API will be used by browsers.

Introduction to Build a Serverless API with Cloudflare Workers

Set up a New Cloudflare Workers Project with wrangler

Process Incoming Request Data Using the Request Class in Workers

Make API Requests in a Workers Function Using the Fetch API

Use Workers Secrets to Securely Store API Credentials

Transform and Return JSON Data From an API in Cloudflare Workers

Add CORS Headers to a Third Party API Response in a Workers API

Render Data from a Workers API Response in a React Application

Deploy a React Application Using Cloudflare Pages

Secure an API with Access-Control-Allow-Headers

Build a Serverless API with Cloudflare Workers

In this lesson, we'll explore the Request class in Workers, and how it can be used to handle incoming data sent to an API. We'll also use a command-line tool to simulate how our API will be used by browsers.

https://app.egghead.io/api/v1/lessons/cloudflare-process-incoming-request-data-using-the-request-class-in-workers/subtitles

Instructor: [0:00] With our serverless API, we want to handle incoming requests. Let's look at the request class and understand how it works. In our handleRequest function, we already have request coming in as the argument to our function. We can get data out of it by using a number of different methods.

[0:15] Inside of our documentation, the request page defines what the class for request looks like and the different functions that we have available to us. The method section shows how we can look at our request and understand what the body of the requests that's coming in looks like.

[0:28] We can do things like get an array buffer, form data, JSON or text. Each of these returns a promise which results to the data type for that specific method, array buffer, form data, object, or string.

[0:41] In this case, we're going to be using JSON. Let's use the JSON function, await the promise that comes back, which will ultimately return this object that has our JSON data. Inside of our function, I'll say, const body = await request.json, which will return once the promise resolves an object representing the request body that's being sent as part of our request at the serverless API.

[1:05] Now, in our response, let's return that back from the API so that we can see what it looks like. To do that, I'll remove this hello worker string and say, JSON stringify body. This will just return back the response it's basically pulling out of JSON and then returning away back into JSON.

[1:21] I'll also remove these headers here and I'll return the JSON stringified body. We want to actually test this and make sure that it would work like we'd expect. To do that, lets open up the terminal and run wrangler dev.

[1:34] Wrangler dev will look at our project and make it available for testing at a localhost URL, in this case localhost curling 8787127...1 being kind of an alias to localhost. Let's just copy that URL then will make a curl request that will send JSON up to our API.

[1:53] I'll say, Curl. Then pass in a header, content type application JSON, and then some data using Dash D. I'll say, Query is set to getchar. Finally, I'll give the URL itself which I just pasted here and you can see that it returns a body of query getchar.

[2:09] It's taking the data from our request, passing it and then giving it back to us as the response. To make sure that this works like we'd expect, let's destructure query out of our body and then return it back as the response as a string.

[2:23] I'll say, Return new response your query was query. Send that back as a simple string using ES6 template literals. If I come back here, you can see that my wrangler dev instance has detected changes. If I come back here and run this command again, you can see it says, your query was getchar.

[2:41] We've looked at the request and parsed out a JSON object out of it and then returned something specifically query as the response back from that request.

Process Incoming Request Data Using the Request Class in Workers

Share this video with your friends

Course

Build a Serverless API with Cloudflare Workers