Conversor de Curl para JavaScript

Converta comandos curl para código JavaScript - Gere código JavaScript fetch/axios pronto para uso para requisições de API

Aviso de Privacidade: Esta ferramenta profissional fornece conversão segura para código JavaScript com proteção de privacidade de nível empresarial. Não armazenamos nenhum dado que você envie, garantindo confidencialidade completa para seu trabalho de desenvolvimento de API.

Gerador de Código 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));

Comandos curl Comuns para Teste de API JavaScript

Aqui estão alguns comandos curl comuns que você pode converter para código JavaScript:

Exemplos de JavaScript Fetch e Axios

JavaScript oferece múltiplas maneiras de fazer requisições HTTP. Aqui estão padrões comuns usando tanto a API Fetch quanto Axios:

Upload de Arquivo com 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 com Timeout e Tratamento de Erros

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

Como Usar o Conversor de Código JavaScript

1. Uso Básico

Copie seu comando curl → Cole na caixa de entrada → Obtenha código JavaScript instantaneamente

2. Implemente Tratamento de Erros Adequado

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. Use Cancelamento de Requisição para Melhor 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);
  }
});

Perguntas Frequentes sobre Requisições HTTP JavaScript

P: Como a API fetch do JavaScript difere do curl?

R: Enquanto curl é uma ferramenta de linha de comando para fazer requisições HTTP, a API fetch do JavaScript fornece uma interface programática dentro de navegadores web e Node.js. Fetch usa Promises para lidar com operações assíncronas, enquanto curl executa sincronamente. Além disso, fetch segue redirecionamentos automaticamente e não envia cookies por padrão, enquanto curl faz ambos a menos que configurado de outra forma.

P: Quais são as principais diferenças entre fetch e axios?

R: Fetch é integrado em navegadores modernos, mas requer mais código padrão para tratamento de erros e não analisa automaticamente respostas JSON. Axios é uma biblioteca que fornece uma API mais rica em recursos com análise JSON automática, melhor tratamento de erros, interceptação de requisição/resposta e cancelamento de requisição integrado. Axios também funciona consistentemente em ambientes de navegadores e Node.js.

P: Como lidar com problemas de CORS ao converter comandos curl para JavaScript?

R: Restrições CORS (Compartilhamento de Recursos de Origem Cruzada) se aplicam ao JavaScript baseado em navegador, mas não ao curl. Ao converter comandos curl para JavaScript, você pode encontrar erros CORS se o servidor não incluir cabeçalhos CORS apropriados. Soluções incluem: usar um proxy CORS, solicitar ao proprietário da API para habilitar cabeçalhos CORS, implementar um proxy do lado do servidor em sua aplicação, ou usar Node.js para requisições que não rodam no navegador.

P: Como posso simular a flag -k/--insecure do curl em JavaScript?

R: Em JavaScript baseado em navegador, você não pode ignorar a validação de certificado SSL, pois é um recurso de segurança imposto pelos navegadores. No Node.js, você pode definir a opção rejectUnauthorized: false na configuração do agente HTTPS. No entanto, isso é fortemente desencorajado em produção, pois compromete a segurança. Exemplo: const https = require('https'); const agent = new https.Agent({rejectUnauthorized: false});

P: Como lidar com uploads de arquivo similar à flag -F do curl em JavaScript?

R: Para lidar com uploads de arquivo em JavaScript similar à flag -F do curl, use a API FormData. Por exemplo: const formData = new FormData(); formData.append('file', fileInput.files[0]); formData.append('field', 'value'); fetch('https://api.example.com/upload', { method: 'POST', body: formData }); Esta abordagem funciona tanto com fetch quanto com axios.

P: Como definir timeouts de requisição como o --connect-timeout do curl em JavaScript?

R: Com a API fetch, use AbortController com setTimeout: const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 5000); fetch(url, { signal: controller.signal }); Com axios, use a opção timeout: axios.get(url, { timeout: 5000 }); Ambas abordagens permitem controlar quanto tempo esperar antes de cancelar uma requisição.

P: Como depurar requisições de rede em JavaScript comparado ao modo verbose do curl?

R: Enquanto curl oferece a flag -v/--verbose para informações detalhadas de requisição/resposta, JavaScript fornece diferentes ferramentas de depuração. Nos navegadores, use a aba Network no DevTools para inspecionar requisições, cabeçalhos, payloads e timing. Para depuração programática, você pode usar interceptadores axios para registrar detalhes de requisição/resposta ou implementar registro personalizado com fetch. No Node.js, você pode usar bibliotecas como 'http-debug' ou definir a variável de ambiente NODE_DEBUG=http.

Referência de Comandos Curl para Teste de API JavaScript

Entender comandos curl é essencial para teste eficaz de API com JavaScript. Aqui está uma referência rápida de opções curl comuns que nosso conversor suporta:

Sintaxe curl Básica

curl [options] [URL]

Opções curl Comuns

Convertendo Comandos curl Complexos

Nosso conversor JavaScript lida com comandos curl complexos incluindo múltiplos cabeçalhos, autenticação, payloads de dados e várias opções. Simplesmente cole seu comando curl e obtenha código JavaScript limpo e moderno usando a API Fetch ou Axios.

Melhores Práticas HTTP JavaScript

Ao trabalhar com a API Fetch do JavaScript ou Axios, siga estas melhores práticas para interações de API eficientes e seguras:

1. Use async/await para Melhor Legibilidade

// 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. Implemente Mecanismo de Retry de Requisição

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. Crie Clientes API Reutilizáveis

// 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. Lide com Requisições Concorrentes

// 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. Implemente Cache de Requisição

// 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": "Como converter um comando curl com upload de arquivo para JavaScript?", "acceptedAnswer": { "@type": "Answer", "text": "Para uploads de arquivo em JavaScript, você precisará usar a API FormData. Nosso conversor lida com comandos curl com opções -F ou --form e gera o código JavaScript apropriado usando fetch ou axios." } } ] }

Converter curl para Outras Linguagens

PHP Python JavaScript Go Ruby Java