Async/await uses promises under the hood. It’s just syntactic sugar.
// 1 - async/await version
const request = browser.storage.local.get("settings");
const data = await request;
console.log("settings", data.settings);
// 2 - Promise version
const request = browser.storage.local.get("settings");
request.then((data) => {
console.log("settings", data.settings);
});
Promises took me a while to wrap my head around. The thing that eventually made it click for me was thinking about them using a physical analogy: restaurants.
Say you go to a restaurant and after you place an order they give you a card with a number on it. You sit down at a table and place the number card in a holder. Once the food is ready, a server will bring it out to you and take the number. Now you’re ready to eat!
Well, that number is basically a JavaScript promise. The number itself is a promise that the restaurant will bring you your food when it’s ready. The number itself isn’t the food you want, but it is a commitment that it will be delivered to you as soon as possible. Or, if something bad happens and they can’t give you your food (say they run out of an ingredient) it’s a way that they can let you know.
The key here is that the number is an abstraction of your order. That means you can do things like place an order for someone else and give them the number or trade orders with a friend. The restaurant doesn’t need to know that the person receiving the order isn’t the same one that made it, they’ll just deliver the food to the right place regardless.
And since JS promises aren’t bound by physical limits we can also do things like share a copy of the promise with anyone else that might want a copy of our order. Or, say, make an API request and pass the promise to both the UI layer and storage system.