Curl से JavaScript कन्वर्टर

JavaScript API टेस्टिंग के लिए सामान्य curl कमांड्स

यहां कुछ सामान्य curl कमांड्स हैं जिन्हें आप JavaScript कोड में बदल सकते हैं:

• Basic GET request: curl https://api.example.com/users
• POST with JSON data: curl -X POST -H "Content-Type: application/json" -d '{"name":"John","email":"[email protected]"}' https://api.example.com/users
• PUT with authentication: curl -X PUT -H "Authorization: Bearer token123" -d '{"status":"active"}' https://api.example.com/users/1
• DELETE request: curl -X DELETE https://api.example.com/users/1
• Custom headers: curl -H "X-API-Key: abc123" -H "Accept: application/json" https://api.example.com/data

JavaScript Fetch और Axios उदाहरण

JavaScript HTTP अनुरोध करने के कई तरीके प्रदान करता है। यहां Fetch API और Axios दोनों का उपयोग करके सामान्य पैटर्न हैं:

JavaScript Fetch के साथ फाइल अपलोड

const formData = new FormData();
formData.append('file', document.querySelector('#fileInput').files[0]);

fetch('https://api.example.com/upload', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN_HERE'
  },
  body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

टाइमआउट और एरर हैंडलिंग के साथ JavaScript Fetch

const controller = new AbortController();
const signal = controller.signal;

// Set timeout of 5 seconds
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch('https://api.example.com/data', {
  method: 'GET',
  signal: signal
})
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  clearTimeout(timeoutId);
  return response.json();
})
.then(data => console.log(data))
.catch(error => {
  if (error.name === 'AbortError') {
    console.error('Request timed out');
  } else {
    console.error('Error:', error);
  }
});

JavaScript API टेस्टिंग के लिए Curl कमांड रेफरेंस

JavaScript के साथ प्रभावी API टेस्टिंग के लिए curl कमांड्स को समझना आवश्यक है। यहां सामान्य curl विकल्पों का एक त्वरित संदर्भ है जिसे हमारा कन्वर्टर समर्थित करता है:

बेसिक curl सिंटैक्स

curl [options] [URL]

सामान्य curl विकल्प

• -X, --request METHOD: Specify request method (GET, POST, PUT, DELETE, etc.)
• -H, --header LINE: Add header to the request
• -d, --data DATA: Send data in POST request
• -F, --form CONTENT: Submit form data
• -u, --user USER:PASSWORD: Server user and password
• -k, --insecure: Allow insecure server connections
• -I, --head: Show document info only
• -v, --verbose: Make the operation more verbose
• -s, --silent: Silent mode
• --connect-timeout SECONDS: Maximum time for connection

जटिल curl कमांड्स को कन्वर्ट करना

हमारा JavaScript कन्वर्टर मल्टीपल हेडर्स, ऑथेंटिकेशन, डेटा पेलोड और विभिन्न विकल्पों सहित जटिल curl कमांड्स को संभालता है। बस अपना curl कमांड पेस्ट करें और Fetch API या Axios का उपयोग करके क्लीन, मॉडर्न JavaScript कोड प्राप्त करें।

JavaScript HTTP बेस्ट प्रैक्टिसेज

JavaScript के Fetch API या Axios के साथ काम करते समय, कुशल और सुरक्षित API इंटरैक्शन के लिए इन बेस्ट प्रैक्टिसेज का पालन करें:

1. बेहतर पठनीयता के लिए async/await का उपयोग करें

// Using async/await with fetch
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

// Using async/await with axios
async function fetchDataWithAxios() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
    return response.data;
  } catch (error) {
    console.error('Axios error:', error);
  }
}

2. रिक्वेस्ट रीट्राई मैकेनिज्म इम्प्लीमेंट करें

async function fetchWithRetry(url, options = {}, retries = 3, backoff = 300) {
  try {
    const response = await fetch(url, options);
    return response;
  } catch (error) {
    if (retries <= 1) throw error;
    
    await new Promise(resolve => setTimeout(resolve, backoff));
    return fetchWithRetry(url, options, retries - 1, backoff * 2);
  }
}

3. पुन: प्रयोज्य API क्लाइंट्स बनाएं

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

// Add request interceptors
apiClient.interceptors.request.use(config => {
  // Do something before request is sent
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// Add response interceptors
apiClient.interceptors.response.use(response => {
  // Any status code within 2xx range
  return response;
}, error => {
  // Handle 401 Unauthorized errors
  if (error.response && error.response.status === 401) {
    console.log('Unauthorized, please login again');
  }
  return Promise.reject(error);
});

// Use the API client
apiClient.get('/users')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

4. कॉन्करेंट रिक्वेस्ट्स को हैंडल करें

// Using Promise.all with fetch
async function fetchMultipleResources() {
  try {
    const [users, products, orders] = await Promise.all([
      fetch('https://api.example.com/users').then(res => res.json()),
      fetch('https://api.example.com/products').then(res => res.json()),
      fetch('https://api.example.com/orders').then(res => res.json())
    ]);
    
    console.log({ users, products, orders });
    return { users, products, orders };
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

// Using axios.all for concurrent requests
async function fetchMultipleResourcesWithAxios() {
  try {
    const [users, products, orders] = await axios.all([
      axios.get('https://api.example.com/users'),
      axios.get('https://api.example.com/products'),
      axios.get('https://api.example.com/orders')
    ]);
    
    console.log({
      users: users.data,
      products: products.data,
      orders: orders.data
    });
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

5. रिक्वेस्ट कैशिंग इम्प्लीमेंट करें

// Simple in-memory cache implementation
const cache = new Map();

async function fetchWithCache(url, options = {}, ttl = 60000) {
  const cacheKey = `${url}-${JSON.stringify(options)}`;
  
  // Check cache
  const cachedItem = cache.get(cacheKey);
  if (cachedItem && Date.now() < cachedItem.expiry) {
    console.log('Using cached data');
    return cachedItem.data;
  }
  
  // If no cache or expired, make the request
  const response = await fetch(url, options);
  const data = await response.json();
  
  // Update cache
  cache.set(cacheKey, {
    data,
    expiry: Date.now() + ttl
  });
  
  return data;
}