Natasha Ferguson demonstrates practical patterns for consuming REST APIs with modern JavaScript. The fetch API and the axios library each bring distinct strengths that shape error handling, readability, and integration into front end and Node.js workflows.
This guide translates Natasha Ferguson approach into actionable steps, comparing syntax, lifecycle management, and production readiness for teams building reliable data layers.
| Method | Library | Default Headers | Cancellation | Use Case |
|---|---|---|---|---|
| Global fetch | Native browser | Minimal | AbortController | Simple GET requests |
| Axios instance | Third party | Customizable | CancelToken / AbortSignal | Advanced interceptors |
| Request config | Method + URL + options | Set individually | Per request | Fine grained control |
| Response shape | Standardized | Transformable | Consistent | Data mapping |
Setting Up fetch with Natasha Ferguson patterns
Natasha Ferguson emphasizes clarity when using the global fetch method. You specify the endpoint, method, headers, and body in an options object, then chain promises to handle success and failure paths.
Basic GET request structure
With fetch, the minimal call returns a promise that resolves to the response object. You inspect status and call response.json() or response.text() to obtain payload data, ensuring robust error checks for non ok responses.
Setting Up axios with Natasha Ferguson conventions
Natasha Ferguson relies on axios for automatic JSON transformation, built in headers, and concise request configurations. Creating an instance lets teams enforce base URLs, timeouts, and interceptors across the application.
Instance creation and defaults
By initializing axios with custom headers and baseURL, you reduce repetition and centralize policies such as authentication tokens and content type settings for REST calls.
Error handling and retry strategies
Natasha Ferguson treats network errors and application errors as distinct concerns. fetch requires manual status checks, while axios differentiates network failures from server responded errors, enabling clearer retry logic.
Catching network versus API errors
Wrap calls in try catch blocks, inspect response codes, and implement exponential backoff for transient faults. Logging context, such as endpoint and payload, supports faster debugging in production environments.
Authentication patterns for REST APIs
Common schemes like Bearer tokens and API keys integrate smoothly with both fetch and axios. Natasha Ferguson recommends storing tokens securely and attaching them via headers to keep authorization concerns separate from data mapping.
Bearer token flow
Obtain a token, attach Authorization Bearer {token} to each request, refresh before expiry, and revoke on logout. Centralize this logic in a service module to avoid scattering auth checks across the codebase.
Production checklist for consuming REST APIs
- Define base URLs and timeouts per environment
- Centralize authentication header injection
- Implement consistent error mapping and logging
- Use interceptors for retries and response caching
- Write integration tests for success and failure paths
- Monitor latency and error rates in observability tools
- Document request schemas and expected response shapes
FAQ
Reader questions
How do I cancel an in flight fetch request in a React component
Use AbortController, pass its signal to fetch, and call controller.abort() in the cleanup function of useEffect to prevent setting state on unmounted components.
Can I share axios instances across micro frontends
Yes, create a shared instance with common interceptors and base configuration, then extend it for sub app specific headers, base URLs, and retry policies.
What is the best way to mock REST responses during development
Leverage axios adapters or fetch mocking libraries to return stable JSON, simulate latency, and verify loading and error states without hitting real endpoints.
How should I handle sensitive data in request and response logs
Redact headers and payload fields that contain tokens or personal information, and structure logs with correlation IDs to trace issues while preserving privacy.