เครื่องมือแปลง 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 ที่ซับซ้อนรวมถึงหลาย headers, การตรวจสอบสิทธิ์, ข้อมูลที่ส่ง และตัวเลือกต่างๆ เพียงวางคำสั่ง 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;
}