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 Show
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ÍXMLHttpRequestXMLHttpRequest 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
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
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. 0, 1 và 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 onloadChú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ự
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
Nhược điểm của XMLHttpRequest
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
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 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ụngPhươ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
Ưu điểm của Tìm nạp
Nhược điểm của Tìm nạp
trụcAxios 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 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
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 5 như ví dụ sau, được triển khai bằng cách sử dụng async/await, cho thấy
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
Nhược điểm của Axios
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
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ự
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 6 của SuperAgentƯu điểm của SuperAgent
Nhược điểm của SuperAgent
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
Chúng tôi có thể gửi các yêu cầu POST theo một mẫu tương tự
Ưu điểm của Kỳ
Nhược điểm của Kỳ
kết thúcTrong 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 |