JavaScript cURL Guide: fetch, axios, and Node.js HTTP

Introduction

JavaScript developers frequently need to convert cURL commands to JavaScript code for both frontend and backend applications. Whether you're working with browser-based fetch API, popular libraries like axios, or Node.js built-in modules, understanding how to translate cURL commands to JavaScript is essential for modern web development.

This comprehensive guide covers multiple approaches to handle HTTP requests in JavaScript, from simple GET requests to complex authentication and file uploads.

JavaScript HTTP Methods Overview

There are several ways to make HTTP requests in JavaScript:

Fetch API: Modern browser-native method (ES6+)
Axios: Popular third-party library with rich features
XMLHttpRequest: Legacy browser method (still widely supported)
Node.js built-in modules: For server-side applications

Method 1: Using Fetch API

Basic GET Request

Converting a simple GET cURL command to fetch:

// cURL command
curl 'https://api.example.com/users'

// JavaScript fetch equivalent
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// Or using async/await (recommended)
async function getUsers() {
  try {
    const response = await fetch('https://api.example.com/users');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

GET Request with Headers

// cURL with headers
curl 'https://api.example.com/data' \
  -H 'Authorization: Bearer token123' \
  -H 'Accept: application/json'

// JavaScript fetch equivalent
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data', {
      method: 'GET',
      headers: {
        'Authorization': 'Bearer token123',
        'Accept': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

POST Request with JSON Data

// cURL POST with JSON
curl -X POST 'https://api.example.com/users' \
  -H 'Content-Type: application/json' \
  -d '{"name": "John", "email": "[email protected]"}'

// JavaScript fetch equivalent
async function createUser(userData) {
  try {
    const response = await fetch('https://api.example.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: 'John',
        email: '[email protected]'
      })
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const result = await response.json();
    return result;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

POST Request with Form Data

// cURL with form data
curl -X POST 'https://api.example.com/submit' \
  -d 'username=admin' \
  -d 'password=secret'

// JavaScript fetch equivalent
async function submitForm() {
  const formData = new FormData();
  formData.append('username', 'admin');
  formData.append('password', 'secret');
  
  try {
    const response = await fetch('https://api.example.com/submit', {
      method: 'POST',
      body: formData
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const result = await response.json();
    return result;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

File Upload with Fetch

// cURL file upload
curl -X POST 'https://api.example.com/upload' \
  -F '[email protected]' \
  -F 'description=Important document'

// JavaScript fetch equivalent
async function uploadFile(file, description) {
  const formData = new FormData();
  formData.append('file', file);
  formData.append('description', description);
  
  try {
    const response = await fetch('https://api.example.com/upload', {
      method: 'POST',
      body: formData
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const result = await response.json();
    return result;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

// Usage with file input
document.getElementById('fileInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (file) {
    try {
      const result = await uploadFile(file, 'Important document');
      console.log('Upload successful:', result);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  }
});

Method 2: Using Axios Library

Installation and Basic Setup

// Install axios (npm)
npm install axios

// Or include via CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

// Import in your JavaScript
import axios from 'axios';
// Or
const axios = require('axios');

GET Request with Axios

// cURL command
curl 'https://api.example.com/users' \
  -H 'Authorization: Bearer token123'

// Axios equivalent
async function getUsers() {
  try {
    const response = await axios.get('https://api.example.com/users', {
      headers: {
        'Authorization': 'Bearer token123'
      }
    });
    
    console.log(response.data);
    return response.data;
  } catch (error) {
    console.error('Error:', error.response?.data || error.message);
    throw error;
  }
}

// Or using axios configuration
const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Authorization': 'Bearer token123'
  }
});

async function getUsers() {
  try {
    const response = await apiClient.get('/users');
    return response.data;
  } catch (error) {
    console.error('Error:', error.response?.data || error.message);
    throw error;
  }
}

POST Request with Axios

// cURL POST with JSON
curl -X POST 'https://api.example.com/users' \
  -H 'Content-Type: application/json' \
  -d '{"name": "John", "email": "[email protected]"}'

// Axios equivalent
async function createUser() {
  try {
    const response = await axios.post('https://api.example.com/users', {
      name: 'John',
      email: '[email protected]'
    }, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    
    console.log('User created:', response.data);
    return response.data;
  } catch (error) {
    if (error.response) {
      // Server responded with error status
      console.error('Error:', error.response.status, error.response.data);
    } else if (error.request) {
      // Request was made but no response received
      console.error('No response received:', error.request);
    } else {
      // Something else happened
      console.error('Error:', error.message);
    }
    throw error;
  }
}

Advanced Axios Configuration

// Create an axios instance with default configuration
const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

// Add request interceptor
apiClient.interceptors.request.use(
  (config) => {
    // Add auth token to requests
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    console.log('Request sent:', config);
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// Add response interceptor
apiClient.interceptors.response.use(
  (response) => {
    console.log('Response received:', response);
    return response;
  },
  (error) => {
    if (error.response?.status === 401) {
      // Handle unauthorized access
      localStorage.removeItem('authToken');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

// Usage
async function apiCall() {
  try {
    const response = await apiClient.get('/users');
    return response.data;
  } catch (error) {
    console.error('API call failed:', error);
    throw error;
  }
}

Method 3: Node.js Built-in Modules

Using Node.js HTTP Module

// cURL GET request
curl 'https://api.example.com/users'

// Node.js equivalent using https module
const https = require('https');

function makeGetRequest(url) {
  return new Promise((resolve, reject) => {
    https.get(url, (response) => {
      let data = '';
      
      response.on('data', (chunk) => {
        data += chunk;
      });
      
      response.on('end', () => {
        try {
          const result = JSON.parse(data);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      });
      
    }).on('error', (error) => {
      reject(error);
    });
  });
}

// Usage
async function getUsers() {
  try {
    const users = await makeGetRequest('https://api.example.com/users');
    console.log(users);
  } catch (error) {
    console.error('Error:', error);
  }
}

POST Request with Node.js

// cURL POST request
curl -X POST 'https://api.example.com/users' \
  -H 'Content-Type: application/json' \
  -d '{"name": "John", "email": "[email protected]"}'

// Node.js equivalent
const https = require('https');
const url = require('url');

function makePostRequest(requestUrl, data) {
  return new Promise((resolve, reject) => {
    const parsedUrl = url.parse(requestUrl);
    const postData = JSON.stringify(data);
    
    const options = {
      hostname: parsedUrl.hostname,
      port: parsedUrl.port || 443,
      path: parsedUrl.path,
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Content-Length': Buffer.byteLength(postData)
      }
    };
    
    const req = https.request(options, (response) => {
      let responseData = '';
      
      response.on('data', (chunk) => {
        responseData += chunk;
      });
      
      response.on('end', () => {
        try {
          const result = JSON.parse(responseData);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      });
    });
    
    req.on('error', (error) => {
      reject(error);
    });
    
    req.write(postData);
    req.end();
  });
}

// Usage
async function createUser() {
  try {
    const user = await makePostRequest('https://api.example.com/users', {
      name: 'John',
      email: '[email protected]'
    });
    console.log('User created:', user);
  } catch (error) {
    console.error('Error:', error);
  }
}

Practical Examples

API Client Class

class APIClient {
  constructor(baseURL, defaultHeaders = {}) {
    this.baseURL = baseURL.replace(/\/$/, '');
    this.defaultHeaders = defaultHeaders;
  }
  
  async request(endpoint, options = {}) {
    const url = `${this.baseURL}/${endpoint.replace(/^\//, '')}`;
    
    const config = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        ...this.defaultHeaders,
        ...options.headers
      },
      ...options
    };
    
    // Convert data to JSON string for POST/PUT requests
    if (config.body && typeof config.body === 'object') {
      config.body = JSON.stringify(config.body);
    }
    
    try {
      const response = await fetch(url, config);
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const contentType = response.headers.get('content-type');
      if (contentType && contentType.includes('application/json')) {
        return await response.json();
      } else {
        return await response.text();
      }
    } catch (error) {
      console.error('API request failed:', error);
      throw error;
    }
  }
  
  get(endpoint, headers = {}) {
    return this.request(endpoint, { method: 'GET', headers });
  }
  
  post(endpoint, data, headers = {}) {
    return this.request(endpoint, {
      method: 'POST',
      body: data,
      headers
    });
  }
  
  put(endpoint, data, headers = {}) {
    return this.request(endpoint, {
      method: 'PUT',
      body: data,
      headers
    });
  }
  
  delete(endpoint, headers = {}) {
    return this.request(endpoint, { method: 'DELETE', headers });
  }
}

// Usage
const api = new APIClient('https://api.example.com', {
  'Authorization': 'Bearer token123'
});

// GET request
const users = await api.get('/users');

// POST request
const newUser = await api.post('/users', {
  name: 'John',
  email: '[email protected]'
});

// PUT request
const updatedUser = await api.put('/users/123', {
  name: 'John Updated'
});

// DELETE request
await api.delete('/users/123');

Error Handling and Retry Logic

class RobustAPIClient {
  constructor(baseURL, options = {}) {
    this.baseURL = baseURL;
    this.maxRetries = options.maxRetries || 3;
    this.retryDelay = options.retryDelay || 1000;
    this.timeout = options.timeout || 10000;
  }
  
  async delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
  
  async requestWithRetry(url, options, retryCount = 0) {
    try {
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), this.timeout);
      
      const response = await fetch(url, {
        ...options,
        signal: controller.signal
      });
      
      clearTimeout(timeoutId);
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      
      return await response.json();
      
    } catch (error) {
      if (retryCount < this.maxRetries) {
        console.log(`Request failed, retrying... (${retryCount + 1}/${this.maxRetries})`);
        await this.delay(this.retryDelay * Math.pow(2, retryCount)); // Exponential backoff
        return this.requestWithRetry(url, options, retryCount + 1);
      } else {
        throw error;
      }
    }
  }
  
  async get(endpoint) {
    const url = `${this.baseURL}/${endpoint}`;
    return this.requestWithRetry(url, { method: 'GET' });
  }
  
  async post(endpoint, data) {
    const url = `${this.baseURL}/${endpoint}`;
    return this.requestWithRetry(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    });
  }
}

// Usage
const robustClient = new RobustAPIClient('https://api.example.com', {
  maxRetries: 3,
  retryDelay: 1000,
  timeout: 10000
});

try {
  const data = await robustClient.get('users');
  console.log(data);
} catch (error) {
  console.error('Request failed after all retries:', error);
}

Best Practices

Error Handling

Always implement comprehensive error handling:

Check response status codes
Handle network errors gracefully
Provide meaningful error messages to users
Log errors for debugging purposes

Security Considerations

Security best practices:

Never expose API keys in client-side code
Use HTTPS for all API communications
Validate and sanitize all input data
Implement proper authentication and authorization
Use CORS properly for cross-origin requests

Performance Optimization

// Use request batching for multiple API calls
async function batchRequests(requests) {
  try {
    const results = await Promise.allSettled(requests);
    
    const successful = results
      .filter(result => result.status === 'fulfilled')
      .map(result => result.value);
    
    const failed = results
      .filter(result => result.status === 'rejected')
      .map(result => result.reason);
    
    return { successful, failed };
  } catch (error) {
    console.error('Batch request error:', error);
    throw error;
  }
}

// Usage
const requests = [
  fetch('/api/users'),
  fetch('/api/products'),
  fetch('/api/orders')
];

const { successful, failed } = await batchRequests(requests);
console.log('Successful requests:', successful.length);
console.log('Failed requests:', failed.length);

Common Issues and Solutions

CORS Issues

// When making cross-origin requests from browser
// Server needs to set appropriate CORS headers

// For development, you can use a proxy
// In package.json (for Create React App):
{
  "name": "my-app",
  "proxy": "http://localhost:3001"
}

// Or handle CORS in your server (Express.js example)
const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

Handling Different Response Types

async function handleResponse(response) {
  const contentType = response.headers.get('content-type');
  
  if (contentType && contentType.includes('application/json')) {
    return await response.json();
  } else if (contentType && contentType.includes('text/')) {
    return await response.text();
  } else if (contentType && contentType.includes('image/')) {
    return await response.blob();
  } else {
    return await response.arrayBuffer();
  }
}

// Usage
const response = await fetch('/api/data');
const data = await handleResponse(response);

Conclusion

JavaScript offers multiple powerful ways to handle HTTP requests, from the modern fetch API to feature-rich libraries like axios. Choose the method that best fits your project requirements:

Fetch API: For modern browsers and simple to moderate complexity
Axios: For feature-rich applications with advanced requirements
Node.js modules: For server-side applications with specific needs

Always implement proper error handling, follow security best practices, and optimize for performance to create robust web applications.