programming javascript

Làm cách nào để gửi yêu cầu HTTP trong JavaScript?

Javascript hiện đại cung cấp một số cách để gửi yêu cầu HTTP đến máy chủ từ xa. Từ đối tượng XMLHttpRequest gốc cho đến các thư viện của bên thứ ba như Axios, việc có một bộ sưu tập các lựa chọn đa dạng như vậy đã khiến cho việc yêu cầu và tải động nội dung trong các ứng dụng web trở nên dễ dàng hơn bao giờ hết

Vì vậy, trong bài viết hôm nay, chúng ta sẽ thảo luận về các cách khác nhau để gửi yêu cầu HTTP trong Javascript. Bắt đầu từ các tùy chọn gốc do ngôn ngữ cung cấp, chúng ta sẽ xem xét năm mô-đun sau và gửi các loại yêu cầu HTTP khác nhau cùng với chúng

Bắt đầu nào

Hướng dẫn, hướng dẫn và mẹo nghề nghiệp hữu ích dành cho nhà phát triển, được gửi mỗi tuần một lần

Đăng ký và nhận bản sao MIỄN PHÍ của cuốn sách mười chiến lược học tập của tôi

Gửi

TẢI XUỐNG SÁCH MIỄN PHÍ

XMLHttpRequest

XMLHttpRequest là một API gốc trong Javascript gói gọn logic gửi yêu cầu HTTP mà không phải làm mới trang web đã tải [yêu cầu AJAX]. Mặc dù hiện tại các nhà phát triển hiếm khi sử dụng trực tiếp XMLHttpRequest, nhưng nó vẫn là khối xây dựng hoạt động bên dưới nhiều mô-đun yêu cầu HTTP phổ biến

Vì vậy, hiểu cách gửi yêu cầu bằng phương pháp XMLHttpRequest có thể giúp bạn xử lý các trường hợp sử dụng riêng nếu thư viện của bên thứ ba không hỗ trợ nó

Đây là cách chúng tôi có thể gửi yêu cầu GET và truy xuất dữ liệu không đồng bộ từ API từ xa bằng API XMLHttpRequest

//create XMLHttpRequest object
const xhr = new XMLHttpRequest[]
//open a get request with the remote server URL
xhr.open["GET", "//world.openfoodfacts.org/category/pastas/1.json"]
//send the Http request
xhr.send[]

//EVENT HANDLERS

//triggered when the response is completed
xhr.onload = function[] {
  if [xhr.status === 200] {
    //parse JSON datax`x
    data = JSON.parse[xhr.responseText]
    console.log[data.count]
    console.log[data.products]
  } else if [xhr.status === 404] {
    console.log["No records found"]
  }
}

//triggered when a network-level error occurs with the request
xhr.onerror = function[] {
  console.log["Network error occurred"]
}

//triggered periodically as the client receives data
//used to monitor the progress of the request
xhr.onprogress = function[e] {
  if [e.lengthComputable] {
    console.log[`${e.loaded} B of ${e.total} B loaded!`]
  } else {
    console.log[`${e.loaded} B loaded!`]
  }
}

Như ví dụ này cho thấy, quá trình gửi một yêu cầu GET với XMLHttpRequest bao gồm ba bước

Tạo XMLHttpRequest
Mở yêu cầu HTTP của loại thụt lề
Gửi yêu cầu

Sau khi yêu cầu được gửi, chúng ta có thể sử dụng trình xử lý sự kiện do XMLHttpObject cung cấp để xử lý phản hồi của nó. Ở đây, chúng tôi đã sử dụng hai trình xử lý sự kiện.

// create XMLHttpRequest object
const xhr = new XMLHttpRequest[]
// open a POST request
xhr.open["POST", "/food"]
// set content-type header to JSON
xhr.setRequestHeader["Content-Type", "application/json"];
// send JSON data to the remote server
xhr.send[JSON.stringify[food]]

// Event Handlers

// track data upload progress
xhr.upload.onprogress = function[e] {
  console.log[`${e.loaded}B of ${e.total}B uploaded!`]
}

// triggered when data upload is finished
xhr.upload.onload = function[e] {
  console.log["Upload completed"]
}

// triggered when the response is fully received
xhr.onload = function[] {
  console.log[xhr.status]
}

// triggered due to a network-level error
xhr.onerror = function[] {
  console.log["Network error occurred"]
}

// create XMLHttpRequest object
const xhr = new XMLHttpRequest[]
// open a POST request
xhr.open["POST", "/food"]
// set content-type header to JSON
xhr.setRequestHeader["Content-Type", "application/json"];
// send JSON data to the remote server
xhr.send[JSON.stringify[food]]

// Event Handlers

// track data upload progress
xhr.upload.onprogress = function[e] {
  console.log[`${e.loaded}B of ${e.total}B uploaded!`]
}

// triggered when data upload is finished
xhr.upload.onload = function[e] {
  console.log["Upload completed"]
}

// triggered when the response is fully received
xhr.onload = function[] {
  console.log[xhr.status]
}

// triggered due to a network-level error
xhr.onerror = function[] {
  console.log["Network error occurred"]
}

1 và

// create XMLHttpRequest object
const xhr = new XMLHttpRequest[]
// open a POST request
xhr.open["POST", "/food"]
// set content-type header to JSON
xhr.setRequestHeader["Content-Type", "application/json"];
// send JSON data to the remote server
xhr.send[JSON.stringify[food]]

// Event Handlers

// track data upload progress
xhr.upload.onprogress = function[e] {
  console.log[`${e.loaded}B of ${e.total}B uploaded!`]
}

// triggered when data upload is finished
xhr.upload.onload = function[e] {
  console.log["Upload completed"]
}

// triggered when the response is fully received
xhr.onload = function[] {
  console.log[xhr.status]
}

// triggered due to a network-level error
xhr.onerror = function[] {
  console.log["Network error occurred"]
}

2. Điều quan trọng cần lưu ý ở đây là phương thức onerror chỉ xử lý các lỗi ở cấp độ mạng liên quan đến yêu cầu. Để xác định lỗi HTTP, chúng ta phải kiểm tra cụ thể mã trạng thái HTTP bên trong phương thức onload

Chúng tôi có thể gửi các yêu cầu POST với XMLHttpRequest theo một mẫu tương tự

// create XMLHttpRequest object
const xhr = new XMLHttpRequest[]
// open a POST request
xhr.open["POST", "/food"]
// set content-type header to JSON
xhr.setRequestHeader["Content-Type", "application/json"];
// send JSON data to the remote server
xhr.send[JSON.stringify[food]]

// Event Handlers

// track data upload progress
xhr.upload.onprogress = function[e] {
  console.log[`${e.loaded}B of ${e.total}B uploaded!`]
}

// triggered when data upload is finished
xhr.upload.onload = function[e] {
  console.log["Upload completed"]
}

// triggered when the response is fully received
xhr.onload = function[] {
  console.log[xhr.status]
}

// triggered due to a network-level error
xhr.onerror = function[] {
  console.log["Network error occurred"]
}

Một điểm khác biệt chính giữa yêu cầu GET trước đó và yêu cầu POST hiện tại là đặt rõ ràng các tiêu đề kiểu nội dung khi đăng dữ liệu JSON. Ngoài ra, có một loại sự kiện bổ sung mà yêu cầu POST có thể kích hoạt so với yêu cầu GET. Chúng là các sự kiện tải lên được truy cập thông qua xhr. trường tải lên. Các trình xử lý sự kiện này giúp chúng tôi theo dõi tiến trình tải lên dữ liệu khi phần thân yêu cầu phải mang một lượng dữ liệu đáng kể [e. g. , hình ảnh, tập tin, v.v. ]

Ưu điểm của XMLHttpRequest

Vì phương pháp này được hỗ trợ nguyên bản nên nó tương thích với tất cả các phiên bản trình duyệt hiện đại
Loại bỏ nhu cầu phụ thuộc bên ngoài
Cho phép truy cập và thao tác các yêu cầu HTTP không đồng bộ ở cấp cơ sở

Nhược điểm của XMLHttpRequest

Mã dài dòng và dài không cần thiết
Không hỗ trợ cú pháp async/await hoặc dựa trên lời hứa
Hầu hết các gói yêu cầu HTTP mới hơn cung cấp các tóm tắt đơn giản trên API XMLHttpRequest phức tạp

Tìm về

Tìm nạp là một API Javascript gốc đơn giản và hiện đại được sử dụng để thực hiện các yêu cầu HTTP. Nó đi kèm với hỗ trợ tích hợp sẵn cho các lời hứa và cải thiện cú pháp dài dòng của XMLHttpRequest đã thảo luận trước đó. Là một API được xây dựng dựa trên nhu cầu của nhà phát triển và ứng dụng hiện đại, Fetch đã trở thành một trong những cách phổ biến nhất để gửi yêu cầu HTTP trong Javascript ngày nay

Theo cú pháp dựa trên lời hứa, chúng ta có thể sử dụng Tìm nạp để gửi các yêu cầu HTTP từ phía máy khách, như ví dụ này cho thấy

fetch["//world.openfoodfacts.org/category/pastas/1.json"]
  .then[response => {
    // indicates whether the response is successful [status code 200-299] or not
    if [!response.ok] {
      throw new Error[`Request failed with status ${reponse.status}`]
    }
    return response.json[]
  }]
  .then[data => {
    console.log[data.count]
    console.log[data.products]
  }]
  .catch[error => console.log[error]]

Tìm nạp làm giảm đáng kể độ phức tạp và dài dòng của mã bằng cách sử dụng cú pháp và lời hứa đơn giản hơn. Trong triển khai này, chúng tôi phải sử dụng trường

// create XMLHttpRequest object
const xhr = new XMLHttpRequest[]
// open a POST request
xhr.open["POST", "/food"]
// set content-type header to JSON
xhr.setRequestHeader["Content-Type", "application/json"];
// send JSON data to the remote server
xhr.send[JSON.stringify[food]]

// Event Handlers

// track data upload progress
xhr.upload.onprogress = function[e] {
  console.log[`${e.loaded}B of ${e.total}B uploaded!`]
}

// triggered when data upload is finished
xhr.upload.onload = function[e] {
  console.log["Upload completed"]
}

// triggered when the response is fully received
xhr.onload = function[] {
  console.log[xhr.status]
}

// triggered due to a network-level error
xhr.onerror = function[] {
  console.log["Network error occurred"]
}

3 để kiểm tra xem phản hồi có chứa lỗi HTTP hay không vì các lỗi bắt được trong phương thức catch thuộc về cấp độ mạng, không phải cấp độ ứng dụng

Phương thức tìm nạp chấp nhận một đối tượng cấu hình làm tham số thứ hai để cho phép thao tác dễ dàng với các trường HTTP như tiêu đề, kiểu nội dung, phương thức yêu cầu, v.v. Bạn có thể tìm thấy danh sách đầy đủ các tùy chọn cấu hình Hỗ trợ tìm nạp trong tài liệu chính thức của nó

Thực hiện các yêu cầu POST với Tìm nạp cũng tuân theo mô hình tương tự như ví dụ trước. Ở đây, chúng ta sử dụng đối tượng config để chỉ định phương thức yêu cầu và truyền dữ liệu cần đăng

Hãy thử triển khai này bằng cách sử dụng async/await

async function postData [] {
  const food = {
    name: "Bread",
    weight: 450,
    quantity: 3
  }

  const response = await fetch["/food", {
    method: "POST",
    body: JSON.stringify[food],
    headers: {
      "Content-Type": "application/json"
    }
  }]

  if [!response.ok] {
    throw new Error[`Request failed with status ${reponse.status}`]
  }
  console.log["Request successful!"]
}

Ưu điểm của Tìm nạp

Cung cấp một cách tự nhiên, đơn giản để thực hiện các yêu cầu HTTP trong Javascript
Dễ học và sử dụng cho các vấn đề ở mọi cấp độ
Hỗ trợ triển khai dựa trên lời hứa, cho phép chúng tôi viết mã ngắn gọn, gọn gàng hơn
Cung cấp các tính năng bổ sung trên XMLHttpRequest, chẳng hạn như tích hợp các đối tượng Yêu cầu và Phản hồi với API bộ đệm ẩn gốc và gửi các yêu cầu no-cors

Nhược điểm của Tìm nạp

Thiếu một số tính năng hữu ích được XMLHttpRequest hỗ trợ, chẳng hạn như hủy bỏ yêu cầu và theo dõi tiến trình yêu cầu. [Tuy nhiên, nó cho phép sử dụng một đối tượng AbortController riêng biệt để kiểm soát việc hủy yêu cầu và hết thời gian chờ. ]
Chấp nhận phản hồi ngay cả khi xảy ra lỗi HTTP. Chúng tôi phải tự kiểm tra lỗi HTTP và xử lý chúng
Không tương thích với Internet Explorer, mặc dù hy vọng rằng điều này không còn quan trọng nữa

trục

Axios là một trong những gói bên thứ ba phổ biến nhất được sử dụng để thực hiện các yêu cầu HTTP trong Javascript. Nó hoạt động với API XMLHttpRequest gốc để mang đến một bộ tính năng linh hoạt và thuận tiện để giải quyết các vấn đề độc đáo như chặn các yêu cầu HTTP và gửi các yêu cầu đồng thời. Tương tự như Tìm nạp, nó hỗ trợ các lời hứa để xử lý các yêu cầu không đồng bộ

Khi thực hiện các yêu cầu GET với Axios, chúng ta có thể sử dụng phương thức chuyên dụng

// create XMLHttpRequest object
const xhr = new XMLHttpRequest[]
// open a POST request
xhr.open["POST", "/food"]
// set content-type header to JSON
xhr.setRequestHeader["Content-Type", "application/json"];
// send JSON data to the remote server
xhr.send[JSON.stringify[food]]

// Event Handlers

// track data upload progress
xhr.upload.onprogress = function[e] {
  console.log[`${e.loaded}B of ${e.total}B uploaded!`]
}

// triggered when data upload is finished
xhr.upload.onload = function[e] {
  console.log["Upload completed"]
}

// triggered when the response is fully received
xhr.onload = function[] {
  console.log[xhr.status]
}

// triggered due to a network-level error
xhr.onerror = function[] {
  console.log["Network error occurred"]
}

4 để biên dịch yêu cầu. Ở đây chúng tôi đã chỉ ra một ví dụ về việc thực hiện

axios.get["//world.openfoodfacts.org/category/pastas/1.json"]
  .then[response => {
    // access parsed JSON response data using response.data field
    data = response.data
    console.log[data.count]
    console.log[data.products]
  }]
  .catch[error => {
    if [error.response] {
      //get HTTP error code
      console.log[error.reponse.status]
    } else {
      console.log[error.message]
    }
  }]

Như ví dụ này cho thấy, Axios giảm khối lượng công việc mà chúng tôi phải thực hiện khi thực hiện các yêu cầu HTTP thậm chí so với Tìm nạp. Nó tự động phân tích dữ liệu JSON nhận được mà chúng ta có thể truy cập thông qua phản hồi. trường dữ liệu. Axios cũng bắt các lỗi HTTP trong phương thức bắt của nó, loại bỏ nhu cầu kiểm tra cụ thể mã trạng thái trước khi xử lý phản hồi. Bên trong phương thức bắt, chúng ta có thể phân biệt lỗi HTTP bằng lỗi. kiểm tra phản hồi, nơi lưu trữ mã lỗi HTTP

Để gửi các yêu cầu POST với Axios, chúng tôi sử dụng phương pháp chuyên dụng

// create XMLHttpRequest object
const xhr = new XMLHttpRequest[]
// open a POST request
xhr.open["POST", "/food"]
// set content-type header to JSON
xhr.setRequestHeader["Content-Type", "application/json"];
// send JSON data to the remote server
xhr.send[JSON.stringify[food]]

// Event Handlers

// track data upload progress
xhr.upload.onprogress = function[e] {
  console.log[`${e.loaded}B of ${e.total}B uploaded!`]
}

// triggered when data upload is finished
xhr.upload.onload = function[e] {
  console.log["Upload completed"]
}

// triggered when the response is fully received
xhr.onload = function[] {
  console.log[xhr.status]
}

// triggered due to a network-level error
xhr.onerror = function[] {
  console.log["Network error occurred"]
}

5 như ví dụ sau, được triển khai bằng cách sử dụng async/await, cho thấy

async function postData [] {
  const food = {
    name: "Bread",
    weight: 450,
    quantity: 3
  }

  try {
    const response = await axios.post["/food", food]
    console.log["Request successful!"]
  } catch [error] {
    if [error.response] {
      console.log[error.reponse.status]
    } else {
      console.log[error.message]
    }
  }
}

Một lần nữa, Axios đơn giản hóa việc triển khai này bằng cách tự động chuyển đổi các đối tượng Javascript thành JSON mà không cần chúng tôi chặn. Các phương thức Axios này cũng chấp nhận tham số cuối cùng chỉ định cấu hình HTTP

Ngoài các tính năng cơ bản này, Axios cung cấp giải pháp cho nhiều trường hợp sử dụng riêng mà chúng tôi sẽ không thảo luận ở đây. Nhưng nếu bạn muốn tìm hiểu sâu hơn về làm việc với Axios trong Javascript cũng như Node. js, bạn có thể làm theo hướng dẫn chuyên sâu này về Axios trên blog của chúng tôi

Ưu điểm của Axios

Cung cấp cú pháp đơn giản, ngắn gọn và dễ học
Hỗ trợ một bộ tính năng linh hoạt không có trong nhiều gói HTTP có sẵn khác. Chúng bao gồm chặn các yêu cầu HTTP, gửi yêu cầu đồng thời, hủy bỏ yêu cầu đã gửi, chuyển đổi dữ liệu JSON tự động, theo dõi tiến trình yêu cầu, v.v.
Tương thích với tất cả các phiên bản trình duyệt chính, bao gồm cả Internet Explorer
Cung cấp hỗ trợ phía Máy khách để bảo vệ XSRF

Nhược điểm của Axios

Thêm một phụ thuộc bên ngoài vào ứng dụng vì mô-đun không phải là nguồn gốc

siêu đại lý

SuperAgent là một trong những gói bên thứ ba sớm nhất được giới thiệu cho Javascript để thực hiện các yêu cầu HTTP. Tương tự như Axios, nó sử dụng API XMLHttpRequest trong quá trình triển khai và đi kèm với một bộ tính năng toàn diện hữu ích trong một số tác vụ xử lý yêu cầu. Gói hỗ trợ cả triển khai dựa trên lời hứa và dựa trên cuộc gọi lại

Khi gửi các yêu cầu HTTP bằng SuperAgent, chúng ta có thể dựa vào các phương thức chuyên dụng của nó để bắt đầu một loại yêu cầu cụ thể. Ví dụ, chúng ta có thể sử dụng superagent. get[] để gửi các yêu cầu GET, như ví dụ này cho thấy

superagent
  .get["//world.openfoodfacts.org/category/pastas/1.json"]
  .then[response => {
    // get parsed JSON response data
    data = response.body
    console.log[data.count]
    console.log[data.products]
  }]
  .catch[error => {
    if [error.response] {
      console.log[error.status]
    } else {
      console.log[error.message]
    }
  }]

Với cú pháp dựa trên lời hứa, SuperAgent tuân theo một mẫu tương tự như Axios để gửi các yêu cầu GET. Nó tự động phân tích nội dung phản hồi thành một đối tượng Javascript mà không cần sự can thiệp của nhà phát triển. Nó cũng bắt các lỗi HTTP bên trong phương thức bắt mà chúng ta có thể xác định bằng lỗi. trường phản hồi. Nếu yêu cầu không thành công do lỗi liên quan đến mạng, các lỗi này. phản ứng và lỗi. các trường trạng thái sẽ không được xác định

Chúng tôi có thể gửi các yêu cầu POST với SuperAgent theo cách tương tự

superagent
  .post["/food"]
  .send[food]
  .then[response => console.log["Request successful!"]]
  .catch[error => {
    if [error.response] {
      console.log[error.status]
    } else {
      console.log[error.message]
    }
  }]

Theo mặc định, SuperAgent giả định rằng dữ liệu đã truyền ở dạng JSON và xử lý việc chuyển đổi dữ liệu cũng như tự đặt các tiêu đề kiểu nội dung. Để chuyển dữ liệu được gửi cùng với yêu cầu POST, chúng tôi sử dụng phương thức

// create XMLHttpRequest object
const xhr = new XMLHttpRequest[]
// open a POST request
xhr.open["POST", "/food"]
// set content-type header to JSON
xhr.setRequestHeader["Content-Type", "application/json"];
// send JSON data to the remote server
xhr.send[JSON.stringify[food]]

// Event Handlers

// track data upload progress
xhr.upload.onprogress = function[e] {
  console.log[`${e.loaded}B of ${e.total}B uploaded!`]
}

// triggered when data upload is finished
xhr.upload.onload = function[e] {
  console.log["Upload completed"]
}

// triggered when the response is fully received
xhr.onload = function[] {
  console.log[xhr.status]
}

// triggered due to a network-level error
xhr.onerror = function[] {
  console.log["Network error occurred"]
}

6 của SuperAgent

Ưu điểm của SuperAgent

Cung cấp một giải pháp dễ sử dụng, dựa trên lời hứa để gửi các yêu cầu HTTP
Đó là một mô-đun trưởng thành và được hỗ trợ tốt trong Javascript
Hỗ trợ thử lại các yêu cầu nếu xảy ra lỗi tạm thời hoặc liên quan đến mạng khi thực hiện yêu cầu
Hỗ trợ mở rộng chức năng của gói với sự trợ giúp của một. Một số ví dụ về các tính năng mà các plugin này thêm vào SuperAgent bao gồm mô phỏng các cuộc gọi HTTP giả, lưu trữ yêu cầu và dữ liệu phản hồi, yêu cầu xếp hàng và điều tiết, v.v.
Tương thích với tất cả các phiên bản trình duyệt chính. Tuy nhiên, bạn phải sử dụng một polyfill cho các phiên bản Internet Explorer cũ hơn để kích hoạt các tính năng như hỗ trợ lời hứa, một lần nữa, IE?

Nhược điểm của SuperAgent

Thêm một phụ thuộc bên ngoài vì mô-đun không phải là nguồn gốc
Không hỗ trợ theo dõi tiến độ yêu cầu

Kỳ

Ky là một gói Javascript tương đối mới có thể được sử dụng để thực hiện các yêu cầu HTTP không đồng bộ từ giao diện người dùng của ứng dụng web. Nó được xây dựng dựa trên API tìm nạp gốc với cú pháp đơn giản hơn và chức năng bổ sung

Ky cung cấp một cú pháp đơn giản để thực hiện các yêu cầu với các phương thức HTTP chuyên dụng của nó. Đây là một ví dụ về việc gửi một yêu cầu GET sử dụng Ky với async/await

async function getData [] {
  try {
    const data = await ky.get["//world.openfoodfacts.org/category/pastas/1.json"].json[]
    console.log[data.count]
    console.log[data.products]
  } catch [error] {
    if [error.response] {
      console.log[error.response.status]
    } else {
      console.log[error.message]
    }
  }
}

Chúng tôi có thể gửi các yêu cầu POST theo một mẫu tương tự

async function postData [] {
  try {
    const response = await ky.post["/food", { json: food }]
    console.log["Request successful!"]
  } catch [error] {
    if [error.response] {
      console.log[error.reponse.status]
    } else {
      console.log[error.message]
    }
  }
}

Ưu điểm của Kỳ

Cung cấp API đơn giản, nhẹ, dựa trên lời hứa để thực hiện các yêu cầu HTTP
Giải quyết một số hạn chế trong API tìm nạp gốc với sự hỗ trợ cho các tính năng như thời gian chờ yêu cầu, thử lại và theo dõi tiến trình
Cung cấp móc để sửa đổi các yêu cầu trong vòng đời của chúng. beforeRequest, afterResponse, beforeRetry, v.v.
Hỗ trợ tất cả các trình duyệt hiện đại như Chrome, Firefox, Safari. Hỗ trợ Internet Explorer thì Ky cung cấp gói thay thế là Ky-Universal, chả hiểu sao họ còn phiền

Nhược điểm của Kỳ

Một gói tương đối mới so với các tùy chọn linh hoạt, trưởng thành khác được thảo luận trong bài đăng này. Thêm một phụ thuộc bên ngoài

kết thúc

Trong những năm gần đây, một số mô-đun gốc và bên thứ ba đã được đưa vào Javascript với mục đích gửi các yêu cầu HTTP. Trong năm phương pháp mà chúng ta đã thảo luận hôm nay, chúng ta đã đề cập đến các cách truyền thống, phổ biến và thậm chí tương đối mới để hoàn thành nhiệm vụ này nhằm cung cấp một cái nhìn tổng quan đầy đủ về các tùy chọn khác nhau dành cho bạn với tư cách là nhà phát triển

Mặc dù các phương pháp này có điểm mạnh và điểm yếu riêng, nhưng bạn có thể chọn phương pháp phù hợp nhất để sử dụng trong các ứng dụng web của mình sau khi xem xét cẩn thận các yêu cầu của mình. Chúng tôi hy vọng bài đăng này sẽ giúp bạn tiến hành phân tích đó và xác định phương pháp phù hợp để gửi yêu cầu HTTP trong các dự án tương lai của bạn

Làm cách nào để gửi yêu cầu HTTP trong JS?

Để gửi yêu cầu GET bằng JavaScript, bạn có thể sử dụng đối tượng XMLHttpRequest hoặc phương thức fetch[] để tương tác với máy chủ . Phương thức tìm nạp [] là một phương thức linh hoạt, mạnh mẽ hỗ trợ các hoạt động không đồng bộ và được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Làm cách nào để viết một yêu cầu HTTP GET trong JavaScript?

Cách đơn giản nhất để thực hiện yêu cầu GET là sử dụng phương thức chung có tên là tìm nạp . Chỉ cần chuyển URL tới chức năng này và nó sẽ trả về phản hồi HTTP như một lời hứa. Vì phản hồi HTTP là một đối tượng lớn, bạn có thể gọi. json[] trên phản hồi để lấy nội dung phản hồi làm lời hứa thứ hai.

Làm cách nào để đăng URL trong JavaScript?

jQuery $. phương thức post[] . phương thức post[] yêu cầu dữ liệu từ máy chủ bằng HTTP POST request. cú pháp. $. post[URL,data,callback]; Tham số URL bắt buộc chỉ định URL bạn muốn yêu cầu.

Làm cách nào để gửi tệp trong JavaScript yêu cầu POST?

Cách tải tệp lên máy chủ bằng JavaScript .

const handleImageUpload = event => { const files = event. Mục tiêu. tệp const formData = new FormData[] formData. append['myFile', files[0]] fetch['/saveImage', { method. 'POST', nội dung. formData }]. .

ứng dụng. .

const handleImageUpload = event => { const files = event