cURL trong JavaScript: Chuyển đổi Yêu cầu thành Fetch và Axios

TL;DR:

• Lệnh cURL là một hợp đồng yêu cầu di động, không phải mã JavaScript. Chuyển đổi phương thức, URL, tiêu đề, thân, xác thực, chính sách chuyển hướng và thời gian chờ một cách có chủ ý.
• Sử dụng fetch() tích hợp sẵn cho các khách hàng nhỏ dựa trên tiêu chuẩn. Kiểm tra response.ok, phân tích thân một cách rõ ràng và hủy yêu cầu bằng tín hiệu hủy.
• Sử dụng Axios khi các bộ chặn, thể hiện chung và chính sách yêu cầu trung tâm cải thiện ứng dụng. Yêu cầu qua wire nên vẫn tương đương với cuộc gọi cURL đã được chứng minh.
• Giữ bí mật ra khỏi các lệnh đã sao chép và tệp nguồn. Đọc khóa API từ môi trường và loại bỏ các tiêu đề được tạo bởi trình duyệt mà máy chủ không yêu cầu.

cURL thường là cách nhanh nhất để chứng minh một điểm cuối HTTP. Công cụ phát triển trình duyệt, tài liệu API và các nhóm hỗ trợ đều tạo ra các lệnh cURL có thể sao chép được vì định dạng khiến yêu cầu trở nên rõ ràng: URL, phương thức, tiêu đề và thân nằm ở một nơi.

Các ứng dụng JavaScript cần cùng một yêu cầu được biểu diễn dưới dạng đối tượng và luồng điều khiển bất đồng bộ. Hướng dẫn này cho biết cách chuyển đổi cURL thành Fetch và Axios mà không mất đi hành vi, sau đó áp dụng phương pháp cho một yêu cầu API Scrapeless.

“Sử dụng cURL trong JavaScript” có nghĩa là gì?

JavaScript không thực thi cú pháp cURL một cách bản địa. “Sử dụng cURL trong JavaScript” thường có nghĩa là chuyển đổi một yêu cầu cURL hoạt động thành fetch() hoặc Axios để ứng dụng gửi cùng một thông điệp HTTP.

Tham khảo lệnh dòng cURL cURL định nghĩa các cờ như -X, -H, --data và --location. Mỗi cờ có một đối tác JavaScript, nhưng việc ánh xạ không phải lúc nào cũng một-một vì shell, cURL, trình duyệt và Node.js có các mặc định khác nhau.

Ánh xạ cURL sang JavaScript

Đừng sao chép mọi tiêu đề từ công cụ phát triển trình duyệt. Host, Content-Length, các trường cấp kết nối, cookie tạm thời và tiêu đề theo dõi thường được tạo ra bởi thời gian chạy hoặc cụ thể cho một phiên.

Bước 1: Bắt đầu với yêu cầu cURL đã được chứng minh

Ví dụ công khai này gửi JSON đến một điểm cuối echo:

Các khối echo công khai trong Bước 1-4 là các hợp đồng yêu cầu minh họa; chúng cho thấy hành vi tương đương mà không tuyên bố kết quả dịch vụ sản xuất.

curl 'https://httpbin.org/anything' \
  -X POST \
  -H 'accept: application/json' \
  -H 'content-type: application/json' \
  --data '{"query":"browser automation","limit":3}'

Trước khi chuyển đổi, xác định hợp đồng:

• Phương thức: POST.
• URL: https://httpbin.org/anything.
• Loại phương tiện yêu cầu: JSON.
• Phản hồi chấp nhận: JSON.
• Các trường thân: query và limit.

Bước 2: Chuyển đổi cURL sang Fetch

Các trình duyệt hiện đại và các thời gian chạy Node.js hiện tại cung cấp API Fetch. Hướng dẫn MDN Fetch tài liệu các tùy chọn yêu cầu và một hành vi quan trọng: các trạng thái lỗi HTTP vẫn được giải quyết thành Response, vì vậy mã phải kiểm tra response.ok.

const response = await fetch("https://httpbin.org/anything", {
  method: "POST",
  headers: {
    accept: "application/json",
    "content-type": "application/json",
  },
  body: JSON.stringify({ query: "browser automation", limit: 3 }),
});

if (!response.ok) {
  throw new Error(`HTTP ${response.status}`);
}

const data = await response.json();
console.log(data.json);

Đối tượng được truyền vào JSON.stringify() là đối tác trực tiếp của thân JSON cURL. Đừng truyền một đối tượng đơn giản như body; Fetch mong đợi một loại thân như chuỗi, FormData hoặc byte.

Bước 3: Thêm thời gian chờ rõ ràng

Một yêu cầu của ứng dụng cần một điều kiện dừng. Sử dụng tín hiệu hủy để hoạt động và tiêu thụ thân phản hồi có thể được hủy cùng nhau. Tài liệu AbortController mô tả mô hình hủy bỏ đó.

const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 15_000);

try {
  const response = await fetch("https://httpbin.org/anything", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ query: "browser automation", limit: 3 }),
    signal: controller.signal,
  });

  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  console.log(await response.json());
} finally {
  clearTimeout(timer);
}

Giữ cho các lỗi vận chuyển, lỗi trạng thái HTTP và lỗi cấu trúc phản hồi riêng biệt. Chúng chỉ ra các nguyên nhân khác nhau và nên tạo ra các nhật ký khác nhau.

Bước 4: Chuyển đổi cùng một yêu cầu cURL sang Axios

Axios chấp nhận thân trong data và phân tích các phản hồi JSON phổ biến thành response.data. Tài liệu tài liệu cấu hình yêu cầu của nó liệt kê các tiêu đề, thời gian chờ, xác thực và các điều khiển khách hàng khác.

import axios from "axios";

const response = await axios({
  method: "post",
  url: "https://httpbin.org/anything",
  headers: {
    accept: "application/json",
    "content-type": "application/json",
  },
  data: { query: "browser automation", limit: 3 },
  timeout: 15_000,
});

console.log(response.data.json);

Axios hữu ích khi một ứng dụng được hưởng lợi từ một thể hiện đã được cấu hình:

const api = axios.create({
  baseURL: "https://httpbin.org",
  timeout: 15_000,
  headers: { accept: "application/json" },
});

const { data } = await api.post("/anything", {
  query: "browser automation",
  limit: 3,
});

Bắt đầu thu thập dữ liệu với Scrapeless

Nâng cao quy trình thu thập dữ liệu và tự động hóa của bạn với Scrapeless!
Đăng ký ngay hôm nay và nhận 5 đô la tín dụng miễn phí — không cần thẻ tín dụng.
Claim your free credit now in the Scrapeless Dashboard.

Bước 5: Chuyển đổi một yêu cầu API Scrapeless

Cùng một bản đồ hoạt động cho một yêu cầu thu thập trên web được quản lý. Ví dụ này sử dụng Scrapeless Universal Scraping API. Nó yêu cầu một SCRAPELESS_API_KEY thuộc về người dùng, vì vậy các khối bảo vệ thông tin xác thực là các ví dụ cấu hình thay vì kết quả thực tế được lấy.

Hình thức cURL là:

curl 'https://api.scrapeless.com/api/v2/unlocker/request' \
  -H "x-api-token: ${SCRAPELESS_API_KEY}" \
  -H 'content-type: application/json' \
  --data '{
    "actor":"unlocker.webunlocker",
    "proxy":{"country":"ANY"},
    "input":{
      "url":"https://example.com/",
      "jsRender":{"enabled":true,"response":{"type":"markdown"}}
    }
  }'

Bản dịch Fetch là:

const payload = {
  actor: "unlocker.webunlocker",
  proxy: { country: "ANY" },
  input: {
    url: "https://example.com/",
    jsRender: { enabled: true, response: { type: "markdown" } },
  },
};

const response = await fetch(
  "https://api.scrapeless.com/api/v2/unlocker/request",
  {
    method: "POST",
    headers: {
      "content-type": "application/json",
      "x-api-token": process.env.SCRAPELESS_API_KEY,
    },
    body: JSON.stringify(payload),
  },
);

if (!response.ok) throw new Error(`HTTP ${response.status}`);
const result = await response.json();
console.log(result);

Bản dịch Axios chỉ thay đổi kiểu khách hàng:

const { data } = await axios.post(
  "https://api.scrapeless.com/api/v2/unlocker/request",
  payload,
  {
    headers: { "x-api-token": process.env.SCRAPELESS_API_KEY },
    timeout: 90_000,
  },
);

console.log(data);

Fetch hoặc Axios: Nên Chọn Cái Nào?

Chọn Fetch khi dự án muốn một API dựa trên tiêu chuẩn, ít phụ thuộc và xử lý phản hồi rõ ràng. Chọn Axios khi các phiên bản chia sẻ, bộ ghi lại, chuyển đổi yêu cầu, hoặc chính sách khách hàng đồng nhất giảm mã ứng dụng.

Sự lựa chọn không nên thay đổi hợp đồng máy chủ. Giữ một lệnh cURL vàng cho chẩn đoán, sau đó xác nhận rằng khách hàng JavaScript gửi cùng một phương thức, tiêu đề và nội dung đã tuần tự hóa.

Các Lỗi Chuyển Đổi Phổ Biến

• Quên JSON.stringify() trong một yêu cầu Fetch.
• Giả định Fetch tự động ném ra khi nhận được phản hồi 404 hoặc 500.
• Sao chép một cookie tạm thời hoặc giá trị ủy quyền vào mã nguồn.
• Gửi data bên trong các tùy chọn Fetch thay vì body.
• Gửi body trong Axios thay vì data.
• Phân tích mỗi phản hồi dưới dạng JSON mà không kiểm tra content-type.
• Mang theo các tiêu đề chỉ dành cho trình duyệt vào một khách hàng Node.js.
• Bỏ qua tín hiệu thời gian chờ hoặc hủy rõ ràng.

Hướng dẫn Scrapeless JSON cURL đề cập đến việc trích dẫn shell và các tệp payload sâu hơn. Kiểm tra bảng giá Scrapeless hiện tại khi khách hàng được dịch chuyển từ xác thực cục bộ sang thu thập bền vững.

Kết luận

Chuyển đổi cURL sang JavaScript là một quá trình dịch có kiểm soát một hợp đồng HTTP. Bản đồ URL, phương thức, tiêu đề, nội dung, xác thực, chuyển hướng, thời gian chờ, và phân tích phản hồi từng bước một. Fetch giữ cho khách hàng gần với tiêu chuẩn web; Axios thêm vào những tiện ích ở cấp độ ứng dụng. Một lệnh cURL đã được xác minh vẫn là tài liệu tham khảo chẩn đoán tốt nhất cho cả hai.

Sẵn Sàng Biến Một Yêu Cầu Đã Được Chứng Minh Thành Một Quy Trình Dữ Liệu?

Tham gia cộng đồng Scrapeless trên Discord hoặc Telegram. Tạo một tài khoản trong Scrapeless Dashboard và chuyển đổi một yêu cầu cURL hoạt động sang khách hàng JavaScript mà ứng dụng của bạn đã sử dụng.

Câu hỏi thường gặp

H: JavaScript có thể chạy một lệnh cURL trực tiếp không?

JavaScript thường chuyển đổi yêu cầu cURL thành Fetch hoặc Axios. Một quy trình Node.js có thể khởi động nhị phân curl bên ngoài, nhưng điều đó thêm một phụ thuộc vào hệ điều hành và hiếm khi cần thiết cho các cuộc gọi HTTP của ứng dụng.

H: Fetch có sẵn trong Node.js không?

Các bản phát hành Node.js hiện tại cung cấp một API Fetch toàn cục tương thích với trình duyệt. Kiểm tra tài liệu chính thức và chính sách hỗ trợ của runtime trước khi chọn phiên bản dự án tối thiểu.

H: Tại sao Fetch không ném ra khi HTTP 404?

Fetch đối xử với phản hồi HTTP như một hoạt động mạng đã hoàn thành ngay cả khi trạng thái báo hiệu một lỗi ứng dụng. Kiểm tra response.ok hoặc response.status trước khi phân tích nội dung.

H: Axios có tốt hơn Fetch không?

Axios tốt hơn khi các phiên bản, bộ ghi lại, chuyển đổi và cấu hình thời gian chờ của nó đơn giản hóa một khách hàng lớn hơn. Fetch tốt hơn khi bề mặt không phụ thuộc nhỏ dựa trên tiêu chuẩn là đủ.

H: Các khóa API nên được xử lý như thế nào trong quá trình chuyển đổi?

Đọc các khóa API từ biến môi trường hoặc một dịch vụ bí mật, chèn chúng tại thời gian chạy và xóa chúng khỏi nhật ký. Không bao giờ dán một khóa thực vào một lệnh cURL đã được cam kết vào một kho lưu trữ.

H: Khi nào một yêu cầu JavaScript cần Scrapeless?

Một khách hàng JavaScript có lợi từ Scrapeless khi mục tiêu yêu cầu kết xuất có quản lý, xuất vùng, hạ tầng phiên, hoặc thu thập có cấu trúc vượt quá một phản hồi HTTP trực tiếp.