HomeLập trìnhJavaScriptYêu cầu nhận...

Yêu cầu nhận JavaScript – Cách tạo một yêu cầu HTTP trong JS


Khi xây dựng ứng dụng, bạn sẽ phải tương tác giữa backend và frontend để lấy, lưu trữ và thao tác dữ liệu.

Có thể thực hiện tương tác này giữa ứng dụng lối vào của bạn và máy chủ phụ trợ thông qua các yêu cầu HTTP.

Có năm phương thức HTTP phổ biến mà bạn có thể sử dụng để tạo yêu cầu và tương tác với máy chủ của mình. Một phương thức HTTP là phương thức GET, phương thức này có thể truy xuất dữ liệu từ máy chủ của bạn.

Bài viết này sẽ hướng dẫn bạn cách yêu cầu dữ liệu từ máy chủ của mình bằng cách thực hiện yêu cầu GET. Bạn sẽ tìm hiểu các phương pháp phổ biến hiện đang tồn tại và một số phương pháp thay thế khác.

Đối với hướng dẫn này, chúng tôi sẽ truy xuất các bài đăng từ API bài đăng Trình giữ chỗ JSON miễn phí.

Có hai phương pháp phổ biến mà bạn có thể dễ dàng sử dụng để thực hiện các yêu cầu HTTP trong JavaScript. Đây là Fetch API và Axios.

Cách tạo một yêu cầu GET với Fetch API

Fetch API là một phương thức JavaScript tích hợp để truy xuất tài nguyên và tương tác với máy chủ phụ trợ hoặc điểm cuối API của bạn. Fetch API được tích hợp sẵn và không yêu cầu cài đặt vào dự án của bạn.

Tìm nạp API chấp nhận một đối số bắt buộc: điểm cuối API/URL. Phương pháp này cũng chấp nhận một Tùy chọn đối số, là đối tượng tùy chọn khi thực hiện yêu cầu GET bởi vì đó là yêu cầu mặc định.

  fetch(url, {
      method: "GET" // default, so we can ignore
  })

Hãy tạo một yêu cầu GET để nhận một bài đăng từ API bài đăng Trình giữ chỗ JSON.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((json) => console.log(json));

Điều này sẽ trả về một bài đăng mà bây giờ bạn có thể lưu trữ trong một biến và sử dụng trong dự án của mình.

Lưu ý: Đối với các phương thức khác, chẳng hạn như POST và DELETE, bạn cần đính kèm phương thức đó vào mảng tùy chọn.

Cách tạo một yêu cầu GET với Axios

Axios là một thư viện máy khách HTTP. Thư viện này dựa trên lời hứa giúp đơn giản hóa việc gửi các yêu cầu HTTP không đồng bộ tới các điểm cuối REST. Chúng tôi sẽ gửi yêu cầu GET đến điểm cuối API Bài đăng JSONPlaceholder.

Đọc thêm  JavaScript trực tuyến – Danh sách trình chỉnh sửa mã HTML, CSS và JS [Browser IDE Tools]

Axios, không giống như Fetch API, không được tích hợp sẵn. Điều này có nghĩa là bạn cần cài đặt Axios vào dự án JavaScript của mình.

Để cài đặt một phần phụ thuộc vào dự án JavaScript của bạn, trước tiên bạn sẽ khởi tạo một phần phụ thuộc mới npm project bằng cách chạy lệnh sau trong thiết bị đầu cuối của bạn:

$ npm init -y

Và bây giờ bạn có thể cài đặt Axios cho dự án của mình bằng cách chạy lệnh sau:

$ npm install axios

Khi Axios được cài đặt thành công, bạn có thể tạo yêu cầu GET của mình. Điều này khá giống với Fetch API request. Bạn sẽ chuyển điểm cuối API/URL tới get() phương thức, sẽ trả lại một lời hứa. Sau đó, bạn có thể xử lý lời hứa với .then().catch() các phương pháp.

axios.get("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));

Ghi chú: Điểm khác biệt chính là, đối với Fetch API, trước tiên bạn chuyển đổi dữ liệu thành JSON, trong khi Axios trả về dữ liệu của bạn trực tiếp dưới dạng dữ liệu JSON.

Tại thời điểm này, bạn đã học cách tạo một yêu cầu GET HTTP với Fetch API và Axios. Nhưng có một số phương pháp khác vẫn tồn tại. Một số phương thức này là XMLHttpRequest và jQuery.

Cách thực hiện yêu cầu GET với XMLHttpRequest

Bạn có thể sử dụng đối tượng XMLHttpRequest để tương tác với máy chủ. Phương pháp này có thể yêu cầu dữ liệu từ điểm cuối API/URL của máy chủ web mà không cần thực hiện làm mới toàn bộ trang.

Ghi chú: Tất cả các trình duyệt hiện đại đều có đối tượng XMLHttpRequest tích hợp để yêu cầu dữ liệu từ máy chủ.

Hãy thực hiện cùng một yêu cầu với XMLHttpRequest bằng cách tạo một đối tượng XMLHttpRequest mới. Sau đó, bạn sẽ mở một kết nối bằng cách chỉ định loại yêu cầu và điểm cuối (URL của máy chủ), sau đó bạn sẽ gửi yêu cầu và cuối cùng lắng nghe phản hồi của máy chủ.

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");
xhr.send();
xhr.responseType = "json";
xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.response);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};

Trong đoạn mã trên, một đối tượng XMLHttpRequest mới được tạo và lưu trữ trong một biến có tên là xhr. Bây giờ bạn có thể truy cập tất cả các đối tượng của nó bằng cách sử dụng biến, chẳng hạn như .open() phương thức, khi bạn chỉ định loại yêu cầu (GET) và điểm cuối/URL nơi bạn muốn yêu cầu dữ liệu.

Đọc thêm  Ngăn xếp cuộc gọi JavaScript - Nó là gì và tại sao nó cần thiết

Một phương pháp khác bạn sẽ sử dụng là .send(), sẽ gửi yêu cầu đến máy chủ. Bạn cũng có thể chỉ định định dạng mà dữ liệu sẽ được trả về bằng cách sử dụng responseType phương pháp. Tại thời điểm này, yêu cầu GET được gửi và tất cả những gì bạn phải làm là lắng nghe phản hồi của nó bằng cách sử dụng onload người nghe sự kiện.

Nếu trạng thái của khách hàng được thực hiện (4), và mã trạng thái thành công (200), sau đó dữ liệu sẽ được ghi vào bảng điều khiển. Nếu không, một thông báo lỗi hiển thị trạng thái lỗi sẽ xuất hiện.

Cách tạo một yêu cầu GET với jQuery

Tạo các yêu cầu HTTP trong jQuery tương đối đơn giản và tương tự như Fetch API và Axios. Để thực hiện yêu cầu GET, trước tiên bạn sẽ cài đặt jQuery hoặc sử dụng CDN của nó trong dự án của mình:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Với jQuery, bạn có thể truy cập phương thức GET $.get()có hai tham số, điểm cuối API/URL và hàm gọi lại chạy khi yêu cầu thành công.

$.get("https://jsonplaceholder.typicode.com/posts/1", (data, status) => {
  console.log(data);
});

Ghi chú: Trong chức năng gọi lại, bạn có quyền truy cập vào yêu cầu của dữ liệu và yêu cầu của trạng thái.

Bạn cũng có thể sử dụng Phương thức AJAX của jQuery, phương thức này khá khác biệt và có thể được sử dụng để thực hiện các yêu cầu không đồng bộ:

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1",
  type: "GET",
  success: function (data) {
    console.log(data);
  }
});

kết thúc

Trong bài viết này, bạn đã học cách tạo yêu cầu HTTP GET trong JavaScript. Bây giờ bạn có thể bắt đầu suy nghĩ – tôi nên sử dụng phương pháp nào?

Đọc thêm  JavaScript Minify – Giảm thiểu JS bằng Công cụ khai thác hoặc jsmin

Nếu đó là một dự án mới, bạn có thể chọn giữa Fetch API và Axios. Ngoài ra, nếu bạn muốn sử dụng các API cơ bản cho một dự án nhỏ, thì không cần sử dụng Axios, vốn yêu cầu cài đặt thư viện.

Hãy mã hóa vui vẻ!



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status