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='//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='//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='//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ầuChú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ạtconst Http = new XMLHttpRequest[];
const url='//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ôiNế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ó ở đâyNgoà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ạijQuery 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ướitì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ậtHà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ướiNhư 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ư axiostrụ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
2Sau đó, bạn cần nhập nó
2Thứ hai, bạn có thể bao gồm các axios bằng CDN
6Tạo yêu cầu với axios
Với Axios, bạn có thể sử dụng
const Http = new XMLHttpRequest[];
const url='//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ủĐƯỢC
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ảnBƯ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
26Sau đó, 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='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
1Sau đó, chúng ta cần nhập HttpClient trong dịch vụ
27 và đưa nó vào bên trong hàm tạoVà trong
28 nhập khẩu
29const Http = new XMLHttpRequest[];
const url='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
5Cuối cùng, gọi dịch vụ và chạy nó
60Bạ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
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