Slim JavaScript Tips for Cleaner Code

Master JavaScript with these slim, practical tips to make your code more efficient, readable, and maintainable.

1. Use async/await for Asynchronous Requests

Why? Using async/await makes your code more readable and easier to maintain compared to using .then() and .catch().

Best Practice: Always use async/await syntax with Axios requests for better readability and error handling.

const fetchData = async () => {
	try {
		const response = await axios.get('https://api.example.com');
		console.log(response.data);
	} catch (error) {
		console.error('Error fetching data:', error);
	}
};

2. Handle Errors Gracefully

Why? Proper error handling ensures your app recovers gracefully from network issues or API errors.

Best Practice: Always use try...catch with async/await and leverage Axios error properties for debugging.

const fetchData = async () => {
	try {
		const response = await axios.get('https://api.example.com');
		console.log(response.data);
	} catch (error) {
		if (error.response) {
			// Server responded with a status other than 2xx
			console.error('Server Error:', error.response);
		} else if (error.request) {
			// No response was received
			console.error('Network Error:', error.request);
		} else {
			// Something went wrong while setting up the request
			console.error('Error:', error.message);
		}
	}
};

3. Set Default Configuration for Common Requests

Why? Setting defaults prevents redundancy and keeps your code DRY (Don't Repeat Yourself).

Best Practice: Use Axios defaults to set common headers, base URLs, or other configurations.

axios.defaults.baseURL = 'https://api.example.com/';
axios.defaults.headers.common['Authorization'] = 'Bearer myAuthToken';
axios.defaults.headers.post['Content-Type'] = 'application/json';

4. Cancel Requests to Avoid Memory Leaks

Why? Canceling requests prevents memory leaks, especially in single-page apps.

Best Practice: Use CancelToken to cancel Axios requests when no longer needed.

const source = axios.CancelToken.source();

const fetchData = async () => {
	try {
		const response = await axios.get('https://api.example.com/data', {
			cancelToken: source.token,
		});
		console.log(response.data);
	} catch (error) {
		if (axios.isCancel(error)) {
			console.log('Request canceled: ', error.message);
		} else {
			console.error('Error: ', error);
		}
	}
};

// To cancel the request
source.cancel();

5. Throttle and Debounce Requests

Why? Throttling and debouncing minimize server requests, improving performance.

Best Practice: Use Lodash’s _.debounce or _.throttle to control request frequency.

const fetchData = _.debounce(async () => {
	try {
		const response = await axios.get('https://api.example.com/data');
		console.log(response.data);
	} catch (error) {
		console.error(error);
	}
}, 500);

6. Timeout for Requests

Why? Setting a timeout prevents your app from hanging due to network issues.

Best Practice: Use the timeout configuration to limit request duration.

axios.get('https://api.example.com/data', {
	timeout: 5000, // Timeout after 5 seconds
})
.then(response => {
	console.log(response.data);
})
.catch(error => {
	console.error('Error:', error);
});

7. Use Response Data Transformation

Why? Transform response data when APIs return it in an unusable format.

Best Practice: Use transformResponse to modify data before use.

axios.get('https://api.example.com/data', {
	transformResponse: [(data) => {
		const parsedData = JSON.parse(data);
		// Return only the 'items' from the response
		return parsedData.items;
	}]
})
.then(response => {
	console.log(response.data); // Just 'items'
});

8. Use withCredentials for Cross-Domain Requests

Why? Send credentials like cookies for cross-domain requests.

Best Practice: Set withCredentials to true when needed.

axios.get('https://api.example.com/data', {
	withCredentials: true, // Send cookies with the request
})
.then(response => {
	console.log(response.data);
});

24 February Tags : axios , frontend