مبدل Curl به JavaScript

دستورات curl رایج برای تست API JavaScript

در اینجا برخی دستورات 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);
  }
});

مرجع دستور Curl برای تست API در JavaScript

درک دستورات curl برای تست مؤثر API با JavaScript ضروری است. در اینجا مرجع سریعی از گزینه‌های رایج 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 خود را جایگذاری کنید و کد JavaScript تمیز و مدرن با استفاده از Fetch API یا Axios دریافت کنید.

بهترین شیوه‌های HTTP JavaScript

هنگام کار با Fetch API یا Axios در JavaScript، این بهترین شیوه‌ها را برای تعاملات API کارآمد و امن دنبال کنید:

۱. از 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);
  }
}

۲. مکانیزم تلاش مجدد درخواست را پیاده‌سازی کنید

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);
  }
}

۳. کلاینت‌های 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));

۴. درخواست‌های همزمان را مدیریت کنید

// 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);
  }
}

۵. ذخیره‌سازی درخواست را پیاده‌سازی کنید

// 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;
}