Curl から JavaScript へのコンバーター

JavaScript API テスト用の一般的な curl コマンド

JavaScript コードに変換できる一般的な curl コマンドをいくつか紹介します：

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

JavaScript API テスト用の Curl コマンドリファレンス

JavaScript での効果的な API テストには curl コマンドを理解することが不可欠です。以下は、当社のコンバーターがサポートする一般的な 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 コマンドを貼り付けるだけで、Fetch API または Axios を使用したクリーンでモダンな JavaScript コードを取得できます。

JavaScript HTTP のベストプラクティス

JavaScript の Fetch API または Axios を使用する際は、効率的で安全な 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;
}