🌍 Function sharing across files

Have you built a Webflow project with WF Localization? Is it working for you? Slater support for WF Localization has been a common request, so we now support it. If you have a Webflow project with Localization, give it a try.

Next, we are exploring how to support code sharing across files. Currently, we are binding functions to the window object, but that solution has some downsides. With the work we are doing on the next version of edgarallan.com, function sharing across files is becoming increasingly important to us.

Let's take a look at some new scripts in the community library.

Community library scripts

⛓️ Bind function to window object
Defines an empty global function to use in separate files. This is the current function sharing solution we use.

🛟 Save data to localStorage
Set localStorage Store an array of surfer names in localStorage as a JSON string.

🎁 Retrieve data from localStorage
Retrieve and parse surfers data from localStorage.

Javascript 101: Fetch Requests to Greenhouse

Last week, we looked at code written by Ben Parker to display Jobs coming from the Greenhouse API. Let's spend more time with his code. Here is the code if you want to review it again.

Understanding how to handle network requests and asynchronous operations can be daunting. In this Javascript 101, we will explore Fetch API, Promises, and Error Handling through the Greenhouse Jobs API.

Fetch API: The Modern Way to Make Requests

JavaScript's Fetch API is a powerful tool for making network requests. It allows you to request resources from a server, like fetching data from an API. The Fetch API is straightforward to use and returns a promise, making it a great way to handle asynchronous operations.

Here we fetch a list of departments from a company's Greenhouse API:

const fetchData = (url) => fetch(url) .then((response) => { if (!response.ok) { throwError(` ${response.status} ${response.statusText}`); } return response.json(); });

In this function, we use fetch(url) to make an HTTP GET request to the specified URL. The fetch function returns a promise, which represents the ongoing operation of fetching the resource.

Promises: Managing Asynchronous Operations

Promises are a fundamental concept in JavaScript for handling asynchronous operations. They provide a way to work with values that may not be available yet, like data fetched from a server.

A promise can be in one of three states:

Pending: The initial state, neither fulfilled nor rejected.
Fulfilled: The operation completed successfully.
Rejected: The operation failed.

When you call fetch, it returns a promise that will be fulfilled when the response is available. We handle the response using the then method:

fetchData('https://api.example.com/departments') .then((data) => { data.departments.forEach((department) => { if (department.jobs.length > 0) { // Do something with departments that have jobs } }); }) .catch(console.error) .finally(writeJobs);

In this example:

We call fetchData with the URL of the API endpoint.
The then method processes the data once the promise is fulfilled. Here, we loop through the departments and do something with the ones that have jobs.
The catch method handles any errors that occur during the fetch or data processing.
The finally method runs the writeJobs function after the promise is settled, regardless of whether it was fulfilled or rejected.

Error Handling: Making Your Code Robust

Error handling is crucial to ensure your code can gracefully handle unexpected situations, like network failures or invalid responses.

In our fetchData function, we check if the response is okay using response.ok. If it's not, we throw an error with the status and status text:

constfetchData = (url) => fetch(url) .then((response) => { if (!response.ok) { throwError(` ${response.status} ${response.statusText}`); } return response.json(); });

This error is then caught in the catch block when we call fetchData:

fetchData('https://api.example.com/departments') .catch(console.error);

By throwing an error when the response is not okay, we ensure that our code can handle problems like network issues or server errors appropriately.

Understanding the Fetch API, Promises, and Error Handling is essential for working with asynchronous operations in JavaScript. The Fetch API allows you to make network requests easily, promises help manage asynchronous data, and proper error handling ensures your code can handle unexpected situations.

By understanding these concepts, you'll be well-equipped to handle more other APIs and share data across services.