Web Development Articles
Master JavaScript Asynchronous Programming with Promise.allSettled()
The Promise.allSettled() method is a powerful tool for handling multiple promises in JavaScript. It returns a single Promise that resolves with an array of objects, each representing the outcome of a promise in the input array.
Each outcome object contains a status property, which is either 'fulfilled' or 'rejected'.
- If the status is 'fulfilled', the object will also contain a value property with the resolved value.
- If the status is 'rejected', the object will contain a reason property with the error (typically the value passed to reject).
Key Difference: Promise.allSettled() vs. Promise.all()
Unlike Promise.all(), which immediately rejects if any promise in the iterable is rejected, Promise.allSettled() never short-circuits. It waits for all promises to settle (either fulfill or reject), making it ideal for use cases where you need to know the result of every asynchronous operation, regardless of individual failures. This provides a more robust way for error handling in async/await and promise chains.
When to use Promise.allSettled() in JavaScript?
Use it whenever you need to process the results of multiple independent asynchronous operations and you don't want a single failure to prevent you from handling the others. Common scenarios include making multiple API calls or database queries where individual failures are non-critical.
The following example demonstrates how to use Promise.allSettled() to handle a mix of successful and failed promises.
// Example: Handling multiple API calls or asynchronous tasks
const p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 200, "Data for User 1"); // Simulates a successful API call
});
const p2 = new Promise((resolve, reject) => {
setTimeout(resolve, 200, "Data for User 2"); // Simulates another successful call
});
const p3 = new Promise((resolve, reject) => {
setTimeout(reject, 200, "User 3 not found"); // Simulates a failed API call (e.g., 404)
});
const p4 = new Promise((resolve, reject) => {
setTimeout(reject, 200, "Server error for User 4"); // Simulates a server error (e.g., 500)
});
// Execute all promises and handle results with allSettled
Promise.allSettled([p1, p2, p3, p4])
.then(results => {
console.log("All operations settled:");
results.forEach((result, index) => {
if (result.status === 'fulfilled') {
console.log(`Promise ${index + 1}: Success -`, result.value);
} else {
console.log(`Promise ${index + 1}: Failed -`, result.reason);
}
});
});
// ** CONSOLE OUTPUT **
// All operations settled:
// Promise 1: Success - Data for User 1
// Promise 2: Success - Data for User 2
// Promise 3: Failed - User 3 not found
// Promise 4: Failed - Server error for User 4
PHP Access Modifiers (public, private, protected)
In PHP Object-Oriented programming, public, private, and protected are access modifiers (visibility keywords) used to control how properties (variables) and methods (functions) of a class can be accessed.
They are important in Object-Oriented Programming (OOP) because they enforce encapsulation (controlling how data is exposed and used).
Public
Members declared public can be accessed from inside the class, outside of the class and by subclasses (child classes). If no visibility is specified on a property the default will be public.
class Car {
public $brand;
public function setBrand($brand) {
$this->brand = $brand; // accessible inside the class
}
}
$car = new Car();
$car->brand = "Toyota"; // accessible outside the class
echo $car->brand; // Output: Toyota
Private
Members declared private can only be accessed inside of the class that defines them. They cannot be accessed from outside the class or by subclasses.
class Car {
private $engineNumber;
public function setEngineNumber($num) {
$this->engineNumber = $num; // accessible inside the class
}
public function getEngineNumber() {
return $this->engineNumber; // allowed via public method
}
}
$car = new Car();
$car->setEngineNumber("ENG123");
// echo $car->engineNumber; ERROR: Cannot access private property
echo $car->getEngineNumber(); // Output: ENG123
Protected
Members declared protected can be accessed inside of the class, in child(sub) classes that inherit from it. They cannot be accessed directly from outside of the class… only subclasses.
class Vehicle {
protected $type = "Generic Vehicle";
protected function getType() {
return $this->type;
}
}
class Car extends Vehicle {
public function showType() {
return $this->getType(); // accessible in child class
}
}
$car = new Car();
// echo $car->type; ERROR: Cannot access protected property
echo $car->showType(); // Output: Generic Vehicle
Using PHP Class Interface
In PHP, an interface defines a contract or blueprint that any class implementing it must follow.
It specifies method signatures (the names, parameters, and visibility of methods), however does not implement the methods.
A class that implements an interface must define all of the methods declared in the interface.
Interfaces help achieve abstraction and multiple inheritance (since a class can implement multiple interfaces).
Example:
// Define an interface
interface Employee {
public function clockIn(string $message);
}
// Implement the interface in a class
class Engineer implements Employee {
public function clockIn(string $message) {
echo "Engineer Clock In: " . PHP_EOL;
}
}
// Another class implementing the same interface
class Mechanic implements Employee {
public function clockIn(string $message) {
echo "Mechanic Clock In: " . PHP_EOL;
}
}
// Usage
function processTask(Employee $employee) {
$employee->clockIn("Task has been processed!");
}
// You can swap implementations easily
$engineer = new Engineer();
$mechanic = new Mechanic();
processTask($engineer); // Clock In Engineer
processTask($mechanic); // Clock In Mechanic
What interfaces can contain:
- Method declarations (no body/implementation)
- Constants (e.g. const MAX_LIMIT = 100;)
What interfaces cannot contain:
- Properties/variables
- Constructors with implementation
- Method bodies
Example:
interface ExampleInterface {
// Allowed
public function doSomething();
// Allowed
const VERSION = "1.0";
// Not allowed: properties inside interfaces
// public $name; // This will cause an error
}
JavaScript Self-Invoked Functions (IIFEs)
What is a self-invoked function? (IIFE)
A self-invoked function, also called an Immediately Invoked Function Expression (IIFE) is a Javascript function expression that is invoked immediately after its declaration. A self-invoked function can be a valuable tool for creating isolated scopes and managing variable privacy in javascript applications.
Key aspects of IIFEs:
- IIFEs execute immediately when defined
- Allows creation of private scopes without polluting global namespace
- Return values can be assigned to variables
- Parameters can be passed to IIFEs
Basic syntax:
(function() {
// code here
})();
// OR arrow functions (ES6+)
(() => {
// code here
})();
Why are IIFEs Necessary?
Immediate Execution with Parameters
// Immediately logs provided data
(function(date, location) {
console.log(`Date: ${date.toDateString()}`);
console.log(`Location: ${location}`);
})(new Date(), 'Seattle');
// Immediately logs:
// Date: Thu Oct 16 2025
// Location: Seattle
Avoiding Global Namespace Pollution
// if multiple scripts use the same variable names
// they won't conflict
(function() {
const restaurant = "Dairy Queen";
console.log(user); // "Dairy Queen"
})();
(function() {
const restaurant = "Burger King";
console.log(user); // "Burger King"
})();
Data Privacy/Encapsulation
// Problem: counter value is vulnerable.
var counter = 0;
function increment() {
return ++counter;
}
// FIX: keeps variables private. counterModule isn't directly accessible
const counterModule = (function() {
let count = 0;
return {
increment: function() {
return ++count;
},
decrement: function() {
return --count;
},
getCount: function() {
return count;
}
};
})();
counterModule.count = 100; // WONT WORK!!
// count is not accessible directly
console.log(counterModule.getCount()); // 0
counterModule.increment();
console.log(counterModule.getCount()); // 1
// OUPTUT: 0 1
Module Pattern Implementation
const User = (function() {
let memory = 0;
function add(a, b) {
return a + b;
}
function store(value) {
memory = value;
}
function recall() {
return memory;
}
// Only expose public methods
return {
add: add,
store: store,
recall: recall
};
})();
console.log(Calculator.add(5, 3)); // 8
Calculator.store(10);
console.log(Calculator.recall()); // 10
// memory is private and inaccessible
Solve Vue.js Component Overload with Parent-Child Patterns
Has your Vue component become a tangled mess? Too much template markup, too many responsibilities, and decreasing maintainability.
Well the solution is to use component composition with parent-child relationships that Vue provides.
In this tutorial, you'll learn to:
1. Refactor effectively breaking up monolithic components into focused children
2. Pass data gracefully using props to send data from parent to child
3. Handle child events by capturing custom events emitted by child components
4. Maintain clean data flow by establishing predictable communication between components
See a real-world example where a parent component delegates UI to a specialized Toolbar child, creating cleaner code and better separation of concerns.
Parent Component:
<template>
<div class="parent-component">
<h2>Evaluate Product</h2>
<Toolbar :message="message" @evaluate-product="evaluate" />
<div class="parent-data">
<p>Total Likes: {{ total.likes }}</p>
<p>Total Dislikes: {{ total.dislikes }}</p>
<p v-if="action">Last Action: {{ action }}</p>
</div>
</div>
</template>
<script>
import Toolbar from './Toolbar.vue';
export default {
name: 'EvaluateComponent',
components: {
Toolbar
},
data(){
return {
total: {
likes: 0,
dislikes: 0
},
message: '',
action: null,
messageTimeout: null
}
},
methods:{
evaluate(task) {
// Clear previous timeout
if (this.messageTimeout) {
clearTimeout(this.messageTimeout);
}
switch(task) {
case 'like':
this.total.likes++;
this.message = "Like incremented successfully!";
this.action = 'like';
break;
case 'dislike':
this.total.dislikes++;
this.message = "Dislike incremented successfully!";
this.action = 'dislike';
break;
}
// Auto-clear message after 3 seconds
this.messageTimeout = setTimeout(() => {
this.message = '';
}, 3000);
}
},
beforeDestroy() {
// Clean up timeout when component is destroyed
if (this.messageTimeout) {
clearTimeout(this.messageTimeout);
}
}
}
</script>
Child Component (Toolbar tag in the parent):
<template>
<div class="child-component">
<div class="message" v-if="messageSet">{{ message }}</div>
<button @click="performEvaluate('like')">Like</button>
<button @click="performEvaluate('dislike')">Dislike</button>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
default: ''
}
},
data() {
return {
// You can add data properties here if needed
}
},
emits: ['evaluate-product'],
computed: {
messageSet() {
return this.message.length > 0;
}
},
methods: {
performEvaluate(evaluation) {
this.$emit('evaluate-product', evaluation);
}
}
}
</script>
Mastering Promise Chaining with .then() in JavaScript
Have you ever made an HTTP API request in JavaScript, only to find the data you need is mysteriously unavailable? You're confident the server-side API works, as you've tested it repeatedly. The issue often lies in JavaScript's asynchronous nature.
JavaScript doesn't pause execution to wait for slow operations, like API calls, to complete. Instead, it triggers the request and immediately moves on to the next line of code. By the time your script tries to use the response data, the request may not have finished.
This is where the Promise object becomes essential. A Promise represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Let's explore how to use them effectively.
1. Basic Promise Handling with .then()
The .then() method is the primary way to interact with a Promise. You can pass it two functions: one to handle a successful resolution and another to handle a rejection.
var name = "Mary"
const promise = new Promise((resolve, reject) => {
name == "Mary" ? resolve(name) : reject(name)
});
// promise.then(ifResolved, ifRejected)
promise.then(
x => console.log(`name resolved: ${x}`),
x => console.log(`name rejected: ${x}`)
) // expected output "name resolved: Mary"
2. Chaining Multiple .then() Methods
Promises are powerful because they can be chained, allowing you to define a sequence of asynchronous steps. Each .then() in the chain receives the result from the previous one.
var name = "Mary"
// initial method provided to the Promise
const analyzeName = (resolve, reject) => {
name == "Mary" ? resolve(name) : reject(name)
}
// method to handle resolved
const nameResolved = x => {
console.log(`Name resolved: ${x}`)
return x
}
// method to handle rejected
const nameRejected = x => {
console.log(`Name rejected: ${x}`)
return x
}
// Step 2
const step2 = x => {
console.log(`Step 2: ${x}`)
return x
}
// Step 3
const step3 = x => {
console.log(`Final Step: ${x}`)
return x
}
const namePromise = new Promise(analyzeName)
namePromise.then(
x => nameResolved(x), // Expected "Name Resolved: Mary"
x => nameRejected(x) // Expected "Name Rejected Mary"
)
.then(x => step2(x)) // Expected "Step 2: Mary"
.then(x => step3(x)) // Expected "Final Step: Mary"
// Name Resolved: Mary
// Step 2: Mary
// Final Step: Mary
Key Takeaway
By using Promises and their .then() method, you gain precise control over the flow of your asynchronous code. This ensures that each step waits for the previous one to complete before executing, which is the fundamental solution to the "missing data" problem in async operations like API calls. For modern, cleaner syntax, consider using async/await, which is built on top of Promises.
How to use JavaScript Promise catch()
There are a few ways to take advantage of the Promise catch method. The catch() method is run when the Promise is rejected or throws an error. Return value from a Promise is passed forward to the catch() method. Promises can be chained as well. It simply forwards the return value from the chained Promise to the catch method if the Promise is rejected or an error is thrown.
A basic example of using catch() with a Promise reject:
// using Promise.reject
let rejectPromise = new Promise(function(resolve, reject){
reject("promise rejected")
})
function displayCatch(x) {
console.log(x)
}
rejectPromise.catch(x => displayCatch(x))
A basic example of using catch() by throwing an error from the promise:
// throw an error
let promiseError = new Promise(function(resolve, reject){
throw "throw error"
})
function displayCatch(x) {
console.log(x)
}
promiseError.catch(x => displayCatch(x));
Chained promises. Reject or throw error from chained Promise:
let resolvePromise = new Promise(function(resolve, reject) {
setTimeout(resolve, 50, "resolved chained");
})
function resolveDisplay(x) {
console.log(x)
throw "throw error from chained Promise"
}
function displayCatch(x) {
console.log(x)
}
resolvePromise.then(x => resolveDisplay(x)).catch(x => displayCatch(x))