Převodník Curl na JavaScript

Převeďte příkazy curl na kód JavaScript - Generujte připravený k použití kód JavaScript fetch/axios pro API požadavky

Oznámení o ochraně soukromí: Tento profesionální nástroj poskytuje bezpečnou konverzi do kódu JavaScript s ochranou soukromí na podnikové úrovni. Neukládáme žádná data, která odešlete, což zajišťuje úplnou důvěrnost pro vaši práci na vývoji API.

Generátor kódu JavaScript

// JavaScript code will appear here
// Example:
// Using fetch API
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'test'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Běžné příkazy curl pro testování API v JavaScriptu

Zde jsou některé běžné příkazy curl, které můžete převést na kód 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

Příklady JavaScript Fetch a Axios

JavaScript nabízí více způsobů, jak provádět HTTP požadavky. Zde jsou běžné vzory používající jak Fetch API, tak Axios:

Nahrávání souborů s 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 s časovým limitem a zpracováním chyb

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

Jak používat převodník kódu JavaScript

1. Základní použití

Zkopírujte svůj příkaz curl → Vložte do vstupního pole → Získejte kód JavaScript okamžitě

2. Implementujte správné zpracování chyb

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // Server returned an error status code
      console.error(`Server error: ${error.response.status}`);
      console.error(error.response.data);
    } else if (error.request) {
      // Request was made but no response received
      console.error('Network error - no response received');
    } else {
      // Error in request setup
      console.error('Request error:', error.message);
    }
  });

3. Používejte zrušení požadavku pro lepší UX

// Using fetch with AbortController
const controller = new AbortController();
const signal = controller.signal;

// Cancel request after 5 seconds
setTimeout(() => controller.abort(), 5000);

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request was cancelled');
    } else {
      console.error('Error:', error);
    }
  });

// Using axios with CancelToken
const source = axios.CancelToken.source();

// Cancel request after 5 seconds
setTimeout(() => {
  source.cancel('User cancelled the request');
}, 5000);

axios.get('https://api.example.com/data', {
  cancelToken: source.token
})
.then(response => console.log(response.data))
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request cancelled:', error.message);
  } else {
    console.error('Error:', error);
  }
});

Často kladené otázky o HTTP požadavcích v JavaScriptu

Otázka: Jak se JavaScript fetch API liší od curl?

Odpověď: Zatímco curl je nástroj příkazového řádku pro provádění HTTP požadavků, JavaScript fetch API poskytuje programové rozhraní v rámci webových prohlížečů a Node.js. Fetch používá Promises pro zpracování asynchronních operací, zatímco curl se provádí synchronně. Kromě toho fetch automaticky sleduje přesměrování a ve výchozím nastavení neodesílá cookies, zatímco curl dělá obojí, pokud není nakonfigurován jinak.

Otázka: Jaké jsou klíčové rozdíly mezi fetch a axios?

Odpověď: Fetch je vestavěný v moderních prohlížečích, ale vyžaduje více šablonového kódu pro zpracování chyb a automaticky neparsuje JSON odpovědi. Axios je knihovna, která poskytuje bohatší API s automatickým parsováním JSON, lepším zpracováním chyb, zachycením požadavků/odpovědí a vestavěným zrušením požadavků. Axios také funguje konzistentně napříč prohlížeči a prostředími Node.js.

Otázka: Jak řeším problémy s CORS při převodu příkazů curl na JavaScript?

Odpověď: Omezení CORS (Cross-Origin Resource Sharing) se vztahují na JavaScript v prohlížeči, ale ne na curl. Při převodu příkazů curl na JavaScript se můžete setkat s chybami CORS, pokud server neobsahuje příslušné hlavičky CORS. Řešení zahrnují: použití CORS proxy, požádání vlastníka API o povolení hlaviček CORS, implementaci serverové proxy ve vaší aplikaci nebo použití Node.js pro požadavky, které neběží v prohlížeči.

Otázka: Jak mohu simulovat příznak curl -k/--insecure v JavaScriptu?

Odpověď: V JavaScriptu založeném na prohlížeči nemůžete obejít ověření SSL certifikátu, protože je to bezpečnostní funkce vynucená prohlížeči. V Node.js můžete nastavit možnost rejectUnauthorized: false v konfiguraci HTTPS agenta. To se však v produkci důrazně nedoporučuje, protože to ohrožuje bezpečnost. Příklad: const https = require('https'); const agent = new https.Agent({rejectUnauthorized: false});

Otázka: Jak zpracovávám nahrávání souborů podobně jako příznak curl -F v JavaScriptu?

Odpověď: Pro zpracování nahrávání souborů v JavaScriptu podobně jako příznak curl -F použijte API FormData. Například: const formData = new FormData(); formData.append('file', fileInput.files[0]); formData.append('field', 'value'); fetch('https://api.example.com/upload', { method: 'POST', body: formData }); Tento přístup funguje jak s fetch, tak s axios.

Otázka: Jak nastavím časové limity požadavků jako curl --connect-timeout v JavaScriptu?

Odpověď: S fetch API použijte AbortController s setTimeout: const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 5000); fetch(url, { signal: controller.signal }); S axios použijte možnost timeout: axios.get(url, { timeout: 5000 }); Oba přístupy vám umožňují kontrolovat, jak dlouho čekat před zrušením požadavku.

Otázka: Jak ladit síťové požadavky v JavaScriptu ve srovnání s režimem verbose curl?

Odpověď: Zatímco curl nabízí příznak -v/--verbose pro podrobné informace o požadavku/odpovědi, JavaScript poskytuje různé nástroje pro ladění. V prohlížečích použijte kartu Síť v DevTools k prozkoumání požadavků, hlaviček, užitečných zatížení a časování. Pro programové ladění můžete použít interceptory axios k protokolování detailů požadavku/odpovědi nebo implementovat vlastní protokolování s fetch. V Node.js můžete použít knihovny jako 'http-debug' nebo nastavit proměnnou prostředí NODE_DEBUG=http.

Reference příkazů Curl pro testování API v JavaScriptu

Porozumění příkazům curl je nezbytné pro efektivní testování API s JavaScriptem. Zde je rychlý přehled běžných možností curl, které náš převodník podporuje:

Základní syntaxe curl

curl [options] [URL]

Běžné možnosti 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

Převod složitých příkazů curl

Náš převodník JavaScript zpracovává složité příkazy curl včetně více hlaviček, autentizace, datových užitečných zatížení a různých možností. Jednoduše vložte svůj příkaz curl a získejte čistý, moderní JavaScript kód používající buď Fetch API, nebo Axios.

Osvědčené postupy pro HTTP v JavaScriptu

Při práci s JavaScript Fetch API nebo Axios dodržujte tyto osvědčené postupy pro efektivní a bezpečné interakce s API:

1. Používejte async/await pro lepší čitelnost

// 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. Implementujte mechanismus opakování požadavku

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. Vytvářejte znovupoužitelné API klienty

// 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. Zpracovávejte souběžné požadavky

// 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. Implementujte ukládání požadavků do mezipaměti

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

" } }, { "@type": "Question", "name": "Jak převedu příkaz curl s nahráváním souborů na JavaScript?", "acceptedAnswer": { "@type": "Answer", "text": "Pro nahrávání souborů v JavaScriptu budete muset použít API FormData. Náš převodník zpracovává příkazy curl s možnostmi -F nebo --form a generuje příslušný JavaScript kód pomocí fetch nebo axios." } } ] }

Převodník Curl na JavaScript

Generátor kódu JavaScript

Běžné příkazy curl pro testování API v JavaScriptu

Příklady JavaScript Fetch a Axios

Nahrávání souborů s JavaScript Fetch

JavaScript Fetch s časovým limitem a zpracováním chyb

Jak používat převodník kódu JavaScript

1. Základní použití

2. Implementujte správné zpracování chyb

3. Používejte zrušení požadavku pro lepší UX

Často kladené otázky o HTTP požadavcích v JavaScriptu

Otázka: Jak se JavaScript fetch API liší od curl?

Otázka: Jaké jsou klíčové rozdíly mezi fetch a axios?

Otázka: Jak řeším problémy s CORS při převodu příkazů curl na JavaScript?

Otázka: Jak mohu simulovat příznak curl -k/--insecure v JavaScriptu?

Otázka: Jak zpracovávám nahrávání souborů podobně jako příznak curl -F v JavaScriptu?

Otázka: Jak nastavím časové limity požadavků jako curl --connect-timeout v JavaScriptu?

Otázka: Jak ladit síťové požadavky v JavaScriptu ve srovnání s režimem verbose curl?

Reference příkazů Curl pro testování API v JavaScriptu

Základní syntaxe curl

Běžné možnosti curl

Převod složitých příkazů curl

Osvědčené postupy pro HTTP v JavaScriptu

1. Používejte async/await pro lepší čitelnost

2. Implementujte mechanismus opakování požadavku

3. Vytvářejte znovupoužitelné API klienty

4. Zpracovávejte souběžné požadavky

5. Implementujte ukládání požadavků do mezipaměti

Převést curl do jiných jazyků