Penukar Curl kepada JavaScript

Tukar arahan curl kepada kod JavaScript - Jana kod JavaScript fetch/axios sedia untuk digunakan untuk permintaan API

Notis Privasi: Alat profesional ini menyediakan penukaran selamat kepada kod JavaScript dengan perlindungan privasi gred perusahaan. Kami tidak menyimpan sebarang data yang anda hantar, memastikan kerahsiaan lengkap untuk kerja pembangunan API anda.

Penjana Kod 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));

Arahan curl Biasa untuk Ujian API JavaScript

Berikut adalah beberapa arahan curl biasa yang boleh anda tukar kepada kod JavaScript:

Contoh JavaScript Fetch dan Axios

JavaScript menawarkan pelbagai cara untuk membuat permintaan HTTP. Berikut adalah corak biasa menggunakan kedua-dua API Fetch dan Axios:

Muat Naik Fail dengan 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 dengan Masa Tamat dan Pengendalian Ralat

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

Cara Menggunakan Penukar Kod JavaScript

1. Penggunaan Asas

Salin arahan curl anda → Tampal ke dalam kotak input → Dapatkan kod JavaScript dengan segera

2. Laksanakan Pengendalian Ralat yang Betul

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. Gunakan Pembatalan Permintaan untuk UX yang Lebih Baik

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

Soalan Lazim tentang Permintaan HTTP JavaScript

S: Bagaimana API fetch JavaScript berbeza daripada curl?

J: Walaupun curl adalah alat baris arahan untuk membuat permintaan HTTP, API fetch JavaScript menyediakan antara muka programatik dalam pelayar web dan Node.js. Fetch menggunakan Promises untuk mengendalikan operasi tak segerak, manakala curl dilaksanakan secara segerak. Selain itu, fetch mengikuti pengalihan secara automatik dan tidak menghantar kuki secara lalai, manakala curl melakukan kedua-duanya melainkan dikonfigurasi sebaliknya.

S: Apakah perbezaan utama antara fetch dan axios?

J: Fetch dibina dalam pelayar moden tetapi memerlukan lebih banyak boilerplate untuk pengendalian ralat dan tidak mengurai respons JSON secara automatik. Axios adalah pustaka yang menyediakan API yang lebih kaya dengan ciri dengan penguraian JSON automatik, pengendalian ralat yang lebih baik, pintasan permintaan/respons, dan pembatalan permintaan bawaan. Axios juga berfungsi secara konsisten merentasi persekitaran pelayar dan Node.js.

S: Bagaimana saya mengendalikan isu CORS apabila menukar arahan curl kepada JavaScript?

J: Sekatan CORS (Cross-Origin Resource Sharing) terpakai kepada JavaScript berasaskan pelayar tetapi tidak kepada curl. Apabila menukar arahan curl kepada JavaScript, anda mungkin menghadapi ralat CORS jika pelayan tidak menyertakan pengepala CORS yang sesuai. Penyelesaian termasuk: menggunakan proksi CORS, meminta pemilik API untuk mengaktifkan pengepala CORS, melaksanakan proksi sisi pelayan dalam aplikasi anda, atau menggunakan Node.js untuk permintaan yang tidak berjalan dalam pelayar.

S: Bagaimana saya boleh mensimulasikan bendera -k/--insecure curl dalam JavaScript?

J: Dalam JavaScript berasaskan pelayar, anda tidak boleh memintas pengesahan sijil SSL kerana ia adalah ciri keselamatan yang dikuatkuasakan oleh pelayar. Dalam Node.js, anda boleh menetapkan pilihan rejectUnauthorized: false dalam konfigurasi agen HTTPS. Walau bagaimanapun, ini sangat tidak digalakkan dalam produksi kerana ia menjejaskan keselamatan. Contoh: const https = require('https'); const agent = new https.Agent({rejectUnauthorized: false});

S: Bagaimana saya mengendalikan muat naik fail serupa dengan bendera -F curl dalam JavaScript?

J: Untuk mengendalikan muat naik fail dalam JavaScript serupa dengan bendera -F curl, gunakan API FormData. Contohnya: const formData = new FormData(); formData.append('file', fileInput.files[0]); formData.append('field', 'value'); fetch('https://api.example.com/upload', { method: 'POST', body: formData }); Pendekatan ini berfungsi dengan kedua-dua fetch dan axios.

S: Bagaimana saya menetapkan masa tamat permintaan seperti --connect-timeout curl dalam JavaScript?

J: Dengan API fetch, gunakan AbortController dengan setTimeout: const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 5000); fetch(url, { signal: controller.signal }); Dengan axios, gunakan pilihan timeout: axios.get(url, { timeout: 5000 }); Kedua-dua pendekatan membolehkan anda mengawal berapa lama untuk menunggu sebelum membatalkan permintaan.

S: Bagaimana saya menyahpepijat permintaan rangkaian dalam JavaScript berbanding dengan mod verbose curl?

J: Walaupun curl menawarkan bendera -v/--verbose untuk maklumat permintaan/respons terperinci, JavaScript menyediakan alat penyahpepijatan yang berbeza. Dalam pelayar, gunakan tab Rangkaian dalam DevTools untuk memeriksa permintaan, pengepala, muatan, dan pemasaan. Untuk penyahpepijatan programatik, anda boleh menggunakan pintasan axios untuk mencatat butiran permintaan/respons atau melaksanakan pencatatan tersuai dengan fetch. Dalam Node.js, anda boleh menggunakan pustaka seperti 'http-debug' atau menetapkan pembolehubah persekitaran NODE_DEBUG=http.

Rujukan Arahan Curl untuk Ujian API JavaScript

Memahami arahan curl adalah penting untuk ujian API yang berkesan dengan JavaScript. Berikut adalah rujukan pantas pilihan curl biasa yang disokong oleh penukar kami:

Sintaks curl Asas

curl [options] [URL]

Pilihan curl Biasa

Menukar Arahan curl Kompleks

Penukar JavaScript kami mengendalikan arahan curl kompleks termasuk pelbagai pengepala, pengesahan, muatan data, dan pelbagai pilihan. Hanya tampal arahan curl anda dan dapatkan kod JavaScript yang bersih dan moden menggunakan sama ada API Fetch atau Axios.

Amalan Terbaik HTTP JavaScript

Apabila bekerja dengan API Fetch JavaScript atau Axios, ikuti amalan terbaik ini untuk interaksi API yang cekap dan selamat:

1. Gunakan async/await untuk Kebolehbacaan yang Lebih Baik

// 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. Laksanakan Mekanisme Cubaan Semula Permintaan

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. Cipta Klien API Boleh Guna Semula

// 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. Kendalikan Permintaan Serentak

// 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. Laksanakan Caching Permintaan

// 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": "Bagaimana saya menukar arahan curl dengan muat naik fail kepada JavaScript?", "acceptedAnswer": { "@type": "Answer", "text": "Untuk muat naik fail dalam JavaScript, anda perlu menggunakan API FormData. Penukar kami mengendalikan arahan curl dengan pilihan -F atau --form dan menjana kod JavaScript yang sesuai menggunakan sama ada fetch atau axios." } } ] }

Tukar curl kepada Bahasa Lain

PHP Python JavaScript Go Ruby Java