Μετατροπέας 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:

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