var d=Object.defineProperty,c=Object.defineProperties;var m=Object.getOwnPropertyDescriptors;var t=Object.getOwnPropertySymbols;var o=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;var l=(a,n,s)=>n in a?d(a,n,{enumerable:!0,configurable:!0,writable:!0,value:s}):a[n]=s,e=(a,n)=>{for(var s in n||(n={}))o.call(n,s)&&l(a,s,n[s]);if(t)for(var s of t(n))r.call(n,s)&&l(a,s,n[s]);return a},i=(a,n)=>c(a,m(n));var F=(a,n)=>{var s={};for(var p in a)o.call(a,p)&&n.indexOf(p)<0&&(s[p]=a[p]);if(a!=null&&t)for(var p of t(a))n.indexOf(p)<0&&r.call(a,p)&&(s[p]=a[p]);return s};const makeShortcode=a=>function(s){return console.warn("Component "+a+" was not imported, exported, or provided by MDXProvider as global scope"),mdx("div",e({},s))},Callout=makeShortcode("Callout"),layoutProps={},MDXLayout="wrapper";function MDXContent(s){var p=s,{components:a}=p,n=F(p,["components"]);return mdx(MDXLayout,i(e(e({},layoutProps),n),{components:a,mdxType:"MDXLayout"}),mdx("h2",e({},{id:"svelte"}),mdx("a",e({parentName:"h2"},{href:"#svelte"}),"Svelte")),mdx("p",null,"Svelte is a new compiler that is focused on building fast web applications. It runs at build time and converts declarative components into efficient and optimized JavaScript code."),mdx("p",null,"APIs are the backbone of any application, so let's see how we can call APIs in a Svelte application. I have divided the process into five steps which are as follows:"),mdx("h2",e({},{id:"-step-1-find-an-api"}),mdx("a",e({parentName:"h2"},{href:"#-step-1-find-an-api"}),"\u2192 STEP 1: Find an API")),mdx("p",null,"First of all, let's find an API to use in our Svelte application. ",mdx("a",e({parentName:"p"},{href:"https://RapidAPI.com/hub"}),"RapidAPI Hub")," enables you to choose from thousands of public APIs for use in your projects."),mdx(Callout,{title:"Deep dive",linkText:"Read more",linkHref:"https://rapidapi.com/learn/hub",mdxType:"Callout"},"Learn more about how to use RapidAPI Hub in this fun interactive guide."),mdx("p",null,"For this guide, we will use the ",mdx("a",e({parentName:"p"},{href:"https://RapidAPI.com/carbonandmore-carbonandmore-default/api/carbonfootprint1/"}),"CarbonFootprint API")," from RapidAPI Hub that gives us the carbon footprint data of travel."),mdx("p",null,"To use this API, you need to subscribe to it first. You can do this by clicking on the ",mdx("strong",{parentName:"p"},"Subscribe to Test")," button."),mdx("img",e({},{src:"https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-carbon-footprint-app/images/subscribe.png",alt:"Subscribe to CarbonFootprint API"})),mdx("h2",e({},{id:"-step-2-create-the-caller-function"}),mdx("a",e({parentName:"h2"},{href:"#-step-2-create-the-caller-function"}),"\u2192 STEP 2: Create the Caller Function")),mdx("p",null,"Now, we will create the function which will make the API call. There are two ways in which you can trigger this function:"),mdx("ol",null,mdx("li",{parentName:"ol"},mdx("inlineCode",{parentName:"li"},"onMount")," hook."),mdx("li",{parentName:"ol"},"As a result of an event like clicking a button.")),mdx("h3",e({},{id:"1-onmount-hook"}),mdx("a",e({parentName:"h3"},{href:"#1-onmount-hook"}),"1. ",mdx("inlineCode",{parentName:"a"},"onMount")," hook")),mdx("p",null,"If we put our API call inside the ",mdx("inlineCode",{parentName:"p"},"onMount")," hook of Svelte, the API request will be sent whenever the component mounts. This means that the API call will be made whenever the browser renders the component. You can use this approach to show data without requiring any input from the user, such as a page load."),mdx("p",null,"To use ",mdx("inlineCode",{parentName:"p"},"onMount")," you need to import it in your Svelte file."),mdx("pre",e({},{className:"shiki Shades of Purple",style:{backgroundColor:"#2D2B55",color:"#FFFFFF"}}),mdx("div",e({parentName:"pre"},{className:"language-id"}),"js"),mdx("div",e({parentName:"pre"},{className:"code-container"}),mdx("code",{parentName:"div"},mdx("div",e({parentName:"code"},{className:"line"}),mdx("span",e({parentName:"div"},{style:{color:"#FF9D00"}}),"import"),mdx("span",e({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",e({parentName:"div"},{style:{color:"#E1EFFF"}}),"{"),mdx("span",e({parentName:"div"},{style:{color:"#9EFFFF"}}),"onMount"),mdx("span",e({parentName:"div"},{style:{color:"#E1EFFF"}}),"}"),mdx("span",e({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",e({parentName:"div"},{style:{color:"#FF9D00"}}),"from"),mdx("span",e({parentName:"div"},{style:{color:"#9EFFFF"}})," "),mdx("span",e({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",e({parentName:"div"},{style:{color:"#A5FF90"}}),"svelte"),mdx("span",e({parentName:"div"},{style:{color:"#92FC79"}}),"'"),mdx("span",e({parentName:"div"},{style:{color:"#E1EFFF"}}),";"))))),mdx("p",null,"Now, you can use the hook inside the ",mdx("inlineCode",{parentName:"p"},"

call-api-node-fetch-express

How to use node-fetch to consume APIs on the Express server?

node-fetch is a package that helps you utilize the capabilities of fetch in Express.js. In this piece, let’s learn how to use node-fetch in Express.js code.