Make API Requests in a Workers Function Using the Fetch API

Instructor: [0:00] The fetch API allows us to make requests inside of our workers function to other servers and websites online. Fetch takes two arguments. First, an input which is usually some sort of URL.

[0:11] Then second, options, which include things like headers and bodies and HTTP request methods that we want to use which we'll get into in just a second. In this example, we'll use the Unsplash API which is a source for freely usable images without any sort of copyright.

[0:27] If you haven't already, go to Unsplash's developer section, sign up for an account, and then create your first project. You can see mine here is Workers API.

[0:36] Inside of my Unsplash application you can see that I have this key section here with an access key which is a publicly available key, as well as a secret which I won't show on the video so that I don't have to regenerate it.

[0:47] Unsplash.com/documentation is the API documentation for Unsplash's API. In order to make a request we can authenticate by parsing in either an authorization header, which is of the format client ID, your access key, or you can provide the client ID query parameter right in the URL.

[1:05] Let's make our first request by trying out this API.unsplash.com/photos endpoint which will return a list of photos. Here in our fetch, I'll just parse in that URL, and then I'll pass in an object which has the parameters that I want to include.

[1:20] In this case I'll provide an object called headers. Then the specific header authorization, setting it to the value client ID, and then parsing in my client ID here. Later we'll fill in this value using Wrangler secrets which is a way of securely providing credentials.

[1:37] Though for now I'll just stub this out here by saying, const client ID equals, and then pasting in my publicly available Unsplash client ID. Fetch calls return a promise which resolves into a response.

[1:50] What that means is that I need to say, const response, and then use await to be able to wait for the promised resolve and return whatever is inside that asynchronous function.

[2:01] Back in the documentation, you can find the response page in our runtime API section and get a sense of what this looks like. Down here in the additional instance methods, you can see that there is a function here called JSON which returns a promise that results to a JSON object.

[2:16] What this means is that we can take the data that's coming back from the Unsplash API and use, async await, to wait for it to resolve into a body. Back on our code, we'll say, const data equals await resp.JSON.

[2:31] That will wait for the data to come back, parse the data, and then turn it into a data object. Finally, let's return the data back from the API to make sure that it works like we would expect.

[2:43] To do that, I'm going to return a new response parsing in the data. I'm going to say, JSON.stringify data, which will take that data and turn it into a JSON string. You'll notice, of course, that we're taking this data, parsing it from JSON and then immediately stringifyng it back into JSON.

[3:01] In the future we'll want to take relevant data out of that and to turn it into our own format before returning it. This is a little wasteful, but right now it should work just as a prove of concept. The other thing we need to do here is parse in some headers.

[3:13] Some way to how we structured our fetch request, I'm just going to parse in a secondary object here, parse in headers as a key and then inside of that I'm going to say, content type, which is set to application JSON.

[3:26] You'll notice down below that my editor has de-emphasized these two lines here and that's because we're returning something up here. I'm going to leave this go for now, because ultimately we'll end up using it, but we can have this return new response.

[3:37] You can see that from top to bottom, first it gets the client ID, makes a fetch request to the Unsplash API, parsing in our application's client ID and then takes the data from that response and returns it back from our workers API.

[3:51] Once again to test this, I'm going to run wrangler dev. Once it's started up, I should be able to make a request to this URL. Localhost port 8787. I'll open up a new terminal and I'll just say, curl. Then get that URL. You can see I get a bunch of data back here that's hard to build a parse.

[4:09] Let's make this bigger. What I'm going to do is I'm going to run this command again then I'm just going to use a tool called jq, and we'll parse it and show it in a better prettified JSON format.

[4:19] You can see that there's things like for each photo there's an ID created at, updated at, description URL. There's all this data here. Each method that is on the Unsplash API is documented showing the URL.

[4:34] This is the one we did, get/photos, as well as things like parameters so you can paginate by parsing a page number, harmony items you want per page, and then the actual photos themselves, so the data that we're looking at, things like ID with description, user information, all of those kinds of things.

[4:52] For any of the endpoints on the Unsplash API, you can come here and look and understand what format it will take.