Combining debounce and an AbortController with Axios allows you to make requests with debounced input while also being able to cancel previous requests if new ones are made before the previous one completes. This can be helpful for scenarios like typeahead search or autocomplete functionality. Here's an example of how to combine debounce and an AbortController with Axios:
First, make sure you have Axios and the `lodash.debounce` library installed:
```bash
npm install axios lodash.debounce
```
Now, create a function that combines these features:
```javascript
import axios from 'axios';
import debounce from 'lodash.debounce';
const api = axios.create({
baseURL: 'https://api.example.com', // Replace with your API URL
});
// Create an AbortController instance
const abortController = new AbortController();
// Initialize a variable to keep track of the last request
let lastRequest = null;
// Function to make the API request
const makeApiRequest = async (query) => {
// If there was a previous request, abort it
if (lastRequest) {
abortController.abort();
}
// Create a new signal for the AbortController
const signal = abortController.signal;
try {
const response = await api.get(`/search?q=${query}`, { signal });
console.log('Received data:', response.data);
} catch (error) {
if (error.name === 'AbortError') {
console.log('Request aborted');
} else {
console.error('Error:', error);
}
}
};
// Debounce the API request function to limit how often it's called
const debouncedApiRequest = debounce(makeApiRequest, 300); // Adjust the debounce delay as needed
// Example usage in a React component
function MyComponent() {
const handleInputChange = (event) => {
const query = event.target.value;
debouncedApiRequest(query);
};
return (
<div>
<input type="text" placeholder="Search" onChange={handleInputChange} />
</div>
);
}
```
In this code:
1. We create an `AbortController` to manage requests and an `AbortSignal` to be passed to Axios requests.
2. We debounce the `makeApiRequest` function using `lodash.debounce`. This ensures that the function is not called too frequently.
3. In the `handleInputChange` function (which is typically an event handler in a React component), we call the debounced function with the input query.
4. If a new request is made while a previous one is still pending, the previous request is aborted using the `abortController`. This helps prevent unnecessary requests and minimizes network traffic.
Remember to adjust the API endpoint and debounce delay according to your specific use case.