JavaScript có thể NHẬN dữ liệu bài đăng không?

JavaScript có các mô-đun và phương thức tuyệt vời để tạo các yêu cầu HTTP có thể được sử dụng để gửi hoặc nhận dữ liệu từ tài nguyên phía máy chủ. Trong bài viết này, chúng ta sẽ xem xét một số cách phổ biến để thực hiện các yêu cầu HTTP trong JavaScript

Ajax

Ajax là cách truyền thống để thực hiện yêu cầu HTTP không đồng bộ. Dữ liệu có thể được gửi bằng phương thức HTTP POST và được nhận bằng phương thức HTTP GET. Hãy xem và thực hiện một yêu cầu

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

7. Tôi sẽ sử dụng JSONPlaceholder, API REST trực tuyến miễn phí dành cho nhà phát triển trả về dữ liệu ngẫu nhiên ở định dạng JSON

Để thực hiện lệnh gọi HTTP trong Ajax, bạn cần khởi tạo một phương thức

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

8 mới, chỉ định điểm cuối URL và phương thức HTTP (trong trường hợp này là GET). Cuối cùng, chúng tôi sử dụng phương thức

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

9 để liên kết phương thức HTTP và điểm cuối URL với nhau và gọi phương thức

0 để thực hiện yêu cầu

Chúng tôi ghi phản hồi HTTP vào bảng điều khiển bằng cách sử dụng thuộc tính

1 chứa trình xử lý sự kiện sẽ được gọi khi sự kiện

2 được kích hoạt

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Nếu bạn xem bảng điều khiển trình duyệt của mình, nó sẽ trả về một Mảng dữ liệu ở định dạng JSON. Nhưng làm thế nào chúng ta biết nếu yêu cầu được thực hiện?

Thuộc tính

3 có hai phương thức,

4 và

5 cho phép chúng tôi kiểm tra trạng thái yêu cầu của chúng tôi

Nếu

4 bằng 4 nghĩa là yêu cầu đã được thực hiện. Tài sản

4 có 5 phản hồi. Tìm hiểu nhiều hơn về nó ở đây

Ngoài việc trực tiếp thực hiện lệnh gọi Ajax bằng JavaScript, còn có các phương thức khác mạnh mẽ hơn để thực hiện lệnh gọi HTTP, chẳng hạn như

8, một phương thức của jQuery. Tôi sẽ thảo luận về những điều đó ngay bây giờ

các phương thức jQuery

jQuery có nhiều phương thức để dễ dàng xử lý các yêu cầu HTTP. Để sử dụng các phương thức này, bạn cần đưa thư viện jQuery vào dự án của mình

$. ajax

jQuery Ajax là một trong những phương pháp đơn giản nhất để thực hiện cuộc gọi HTTP

$. phương thức ajax có nhiều tham số, một số tham số là bắt buộc và một số khác là tùy chọn. Nó chứa hai tùy chọn gọi lại

9 và

20 để xử lý phản hồi nhận được

$. lấy phương thức

$. phương thức get được sử dụng để thực hiện các yêu cầu GET. Phải mất hai tham số. điểm cuối và chức năng gọi lại

$. bưu kiện

Phương pháp

21 là một cách khác để đăng dữ liệu lên máy chủ. Phải mất ba tham số.

22, dữ liệu bạn muốn đăng và chức năng gọi lại

$. getJSON

Phương thức

23 chỉ truy xuất dữ liệu ở định dạng JSON. Phải mất hai tham số.

22 và chức năng gọi lại

jQuery có tất cả các phương thức này để yêu cầu hoặc đăng dữ liệu lên máy chủ từ xa. Nhưng bạn thực sự có thể đặt tất cả các phương pháp này vào một. phương pháp

25, như trong ví dụ bên dưới

tìm về

26 là một API web mạnh mẽ mới cho phép bạn thực hiện các yêu cầu không đồng bộ. Trên thực tế,

26 là một trong những cách tốt nhất và yêu thích của tôi để thực hiện một yêu cầu HTTP. Nó trả về một “Lời hứa” là một trong những tính năng tuyệt vời của ES6. Nếu bạn chưa quen với ES6, bạn có thể đọc về nó trong bài viết này. Lời hứa cho phép chúng tôi xử lý yêu cầu không đồng bộ theo cách thông minh hơn. Hãy cùng xem cách thức hoạt động của

26 về mặt kỹ thuật

Hàm

26 nhận một tham số bắt buộc. URL

20. Nó cũng có các tham số tùy chọn khác như trong ví dụ bên dưới

Như bạn có thể thấy,

26 có nhiều lợi thế khi thực hiện các yêu cầu HTTP. Bạn có thể tìm hiểu thêm về nó ở đây. Ngoài ra, trong tìm nạp có các mô-đun và plugin khác cho phép chúng tôi gửi và nhận yêu cầu đến và từ phía máy chủ, chẳng hạn như axios

trục

Axios là một thư viện mã nguồn mở để thực hiện các yêu cầu HTTP và cung cấp nhiều tính năng tuyệt vời. Hãy xem nó hoạt động như thế nào

Cách sử dụng

Trước tiên, bạn cần bao gồm Axios. Có hai cách để đưa Axios vào dự án của bạn

Đầu tiên, bạn có thể sử dụng npm

2

Sau đó, bạn cần nhập nó

2

Thứ hai, bạn có thể bao gồm các axios bằng CDN

6

Tạo yêu cầu với axios

Với Axios, bạn có thể sử dụng

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

7 và

23 để truy xuất và đăng dữ liệu từ máy chủ

LẤY

24 nhận một tham số bắt buộc và cũng có thể nhận tham số tùy chọn thứ hai. Điều này lấy một số dữ liệu như một truy vấn đơn giản

BƯU KIỆN

Axios trả về một “Lời hứa. ” Nếu bạn đã quen với lời hứa, bạn có thể biết rằng một lời hứa có thể thực hiện nhiều yêu cầu. Bạn có thể làm điều tương tự với axios và chạy nhiều yêu cầu cùng một lúc

Axios hỗ trợ nhiều phương pháp và tùy chọn khác. Bạn có thể khám phá chúng tại đây

HttpClient góc cạnh

Angular có mô-đun HTTP riêng hoạt động với các ứng dụng Angular. Nó sử dụng thư viện RxJS để xử lý các yêu cầu không đồng bộ và cung cấp nhiều tùy chọn để thực hiện các yêu cầu HTTP

Thực hiện cuộc gọi đến máy chủ bằng cách sử dụng Angular HttpClient

Để thực hiện yêu cầu bằng cách sử dụng Angular HttpClient, chúng tôi phải chạy mã của mình bên trong ứng dụng Angular. Vì vậy, tôi đã tạo ra một. Nếu bạn chưa quen với Angular, hãy xem bài viết của tôi, tìm hiểu cách tạo ứng dụng Angular đầu tiên của bạn trong 20 phút

Điều đầu tiên chúng ta cần làm là nhập

25 vào

26

Sau đó, chúng ta phải tạo một dịch vụ để xử lý các yêu cầu. Bạn có thể dễ dàng tạo dịch vụ bằng Angular CLI

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

1

Sau đó, chúng ta cần nhập HttpClient trong dịch vụ

27 và đưa nó vào bên trong hàm tạo

Và trong

28 nhập khẩu

29

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

5

Cuối cùng, gọi dịch vụ và chạy nó

60

Bạn có thể xem ví dụ demo trên Stackblitz

kết thúc

Chúng tôi vừa giới thiệu những cách phổ biến nhất để thực hiện yêu cầu gọi HTTP trong JavaScript

Cảm ơn bạn đã dành thời gian. Nếu bạn thích nó, hãy vỗ tay lên 50, nhấp theo dõi và liên hệ với tôi trên Twitter

Nhân tiện, gần đây tôi đã làm việc với một nhóm kỹ sư phần mềm hùng hậu cho một trong những ứng dụng di động của mình. Tổ chức rất tuyệt vời và sản phẩm được giao rất nhanh, nhanh hơn nhiều so với các công ty và dịch giả tự do khác mà tôi từng làm việc cùng, và tôi nghĩ rằng tôi có thể thành thật giới thiệu họ cho các dự án khác ngoài kia. Hãy gửi email cho tôi nếu bạn muốn liên lạc — said@devsdata. com

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Hayani nói

Frontend Developer, Technical Writer, Bootcamp Instructor ➡️ Tham gia lớp học React/React Native của tôi tại nucamp. đồng hành và thay đổi nghề nghiệp sau 6 tháng, sử dụng mã F3748T ➡️ Thông tin liên hệ. nói. dev@gmail. com

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để truy cập dữ liệu POST trong JavaScript?

Làm cách nào để lấy dữ liệu POST từ URL trong JavaScript?

Làm cách nào để gửi dữ liệu POST trong JavaScript?

Chúng ta có thể sử dụng phương thức GET để POST dữ liệu không?