JavaScript có các mô-đun và phương thức tuyệt vời để thực hiện 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 vài 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 GET yêu cầu. 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 một cuộc gọi HTTP trong Ajax, bạn cần khởi tạo một XMLHttpRequest() phương thức, hãy 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 open() để 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 send() phương pháp để loại bỏ 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 XMLHTTPRequest.onreadystatechange thuộc tính chứa trình xử lý sự kiện sẽ được gọi khi readystatechanged sự kiện đượ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? Nói cách khác, làm thế nào chúng ta có thể xử lý các phản hồi với Ajax?
Các onreadystatechange tài sản có hai phương pháp, readyState và status 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 readyState bằng 4 nghĩa là yêu cầu đã hoàn thành. Các readyState tài sản có 5 phản hồi. Tìm hiểu thêm 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ư $.Ajax đó là một phương thức 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.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>$.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 nhận 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 success và error để xử lý phản hồi nhận được.
phương thức $.get
Phương thức $.get được sử dụng để thực hiện các yêu cầu GET. Nó nhận hai tham số: điểm cuối và hàm gọi lại.
$.bài đăng
Các $.post phương thức là một cách khác để đăng dữ liệu lên máy chủ. Nó nhận ba tham số: urldữ liệu bạn muốn đăng và chức năng gọi lại.
$.getJSON
Các $.getJSON phương thức chỉ truy xuất dữ liệu ở định dạng JSON. Nó nhận hai tham số: url và một 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 thành một: $.ajax phương pháp, như đã thấy trong ví dụ dưới đây:
tìm về
fetch 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ộ. Trong thực tế, fetch 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”, đây là một trong những tính năng tuyệt vời của ES6. Nếu bạn không quen thuộc 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. Chúng ta hãy xem làm thế nào fetch công trình kỹ thuật.
Các fetch hàm nhận một tham số bắt buộc: endpoint URL. Nó cũng có các tham số tùy chọn khác như trong ví dụ dưới đây:
Bạn có thể thấy, fetch có nhiều lợi thế để 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. Chúng ta 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:
npm install axios --saveSau đó, bạn cần phải nhập nó
import axios from 'axios'Thứ hai, bạn có thể bao gồm các axios bằng CDN.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>Thực hiện một yêu cầu với axios:
Với Axios bạn có thể sử dụng GET và POST để lấy và đăng dữ liệu từ máy chủ.
ĐƯỢC:
axios 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 thuộc với các 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 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 ở đâ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 một 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 sau 20 phút.
Điều đầu tiên chúng ta cần làm là nhập khẩu HttpClientModule Trong app.module.ts
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 một dịch vụ bằng Angular CLI.
ng g service FetchdataServiceSau đó, chúng ta cần nhập HttpClient vào fetchdataService.ts service và đưa nó vào bên trong hàm tạo.
Và trong app.component.ts nhập khẩu fetchdataService
//import
import { FetchdataService } from './fetchdata.service';Cuối cùng, gọi dịch vụ và chạy nó.
app.component.ts:
Bạn có thể xem ví dụ demo trên Stackblitz.
kết thúc
Chúng tôi vừa trình bày các 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, bấm 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. Bắn cho tôi một email nếu bạn muốn liên lạc – [email protected].
