counselorbot[bot]
commented
2 years ago 🛑 There was an error: FetchError: invalid json response body at https://serverless-camp.azurewebsites.net/api/twocatz?code=snzVbL2KniJ3eYlzC7g0PDkhrDNT4Na1uiJ6cu0pxdLoAzFufssOgQ== reason: Unexpected token / in JSON at position 0 🛑
Week 1 Step 6 ⬤⬤⬤⬤⬤⬤◯◯◯ | 🕐 Estimated completion: 25-35 minutes
Trying to make node-fetch happen
✅ Task:
git pulland create a new branch calledtwocatzTWOCATZ_ENDPOINTand commit function code in a file namedtwocatz/index.jsto thetwocatzbranchtwocatztomain, and only merge when the bot approves your changes!When you paste your Function URL in your browser or make a GET request with Postman, you might get something like:
1: Making requests in Azure
To make a request to the CataaS API, you can try using the
node-fetchmodule, but there are many other ways to do it as you can see here.❓ How can I make a request to the CataaS API?
Let's use the `node-fetch` module for this task. >‼️ Make sure you are in the **directory of your Azure function** to run these commands. 1. Install the module in terminal using the following commands in order: ```sh npm init -y npm install node-fetch@2 ``` 2. Add it to your code: Add this line of code to reference the module at the top of your code (outside of the function): `const fetch = require('node-fetch')` 3. Make the request! Add the following code within the function: ```js const resp = await fetch(THE_ENDPOINT, { method: 'GET' }); const data = await resp.arrayBuffer() // we need to receive it as a buffer since this is an image we are receiving from the API // Buffer?? https://developer.mozilla.org/en-US/docs/Web/API/Blob ``` 4. What should you place in place of `THE_ENDPOINT`? Change the code.2: Return your images encoded in base64!
❓ What does it mean to encode something in base64?
Base64 is *just another way to represent data.* We can also represent the number 11 or 0 in base64. Remember that the images you see on your screen are actually just numbers! When we're coding websites, we can use base64 to display images on websites. The base64 outputted from your API can be used to create this:  Base64 encoding allows programs to encode binary data into text (ASCII characters) in order to prevent data loss. We do this since there are certain transfer channels that only reliably transfer text data, and this encoding method allows us to safely transfer images in the form of text.❓ How can I encode data in base64?
```js base64data = Buffer.from(originaldata).toString('base64') //put what you want to turn into base64 inside "originaldata" //"originaldata" will be encoded in base64. ```For fun: Once your API successfully returns the images in base64, you can see what they look like using this website.
❓ Now that I've got the picture in base64, how do I return it?
`context.res` is the key to answering this question! ```js context.res = { body: { your_picture_in_base64 } } ```>💡 You need to put brackets to return the data in json format.
📹 Walkthrough Video