Dưới đây là những cách phổ biến nhất để thực hiện một yêu cầu HTTP trong JavaScript

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 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 một 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à nhận bằng phương thức HTTP GET. Hãy xem và đưa ra GETyêu cầu. Tôi sẽ sử dụng JSONPlaceholder, một API REST trực tuyến miễn phí dành cho các nhà phát triển trả về dữ liệu ngẫu nhiên ở định dạng JSON.

Để thực hiện cuộc gọi HTTP trong Ajax, bạn cần khởi tạo một XMLHttpRequest()phương thức 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 open()phương thức để liên kết phương thức HTTP và điểm cuối URL với nhau và gọi send()phương thức để kích hoạt yêu cầu.

Chúng tôi ghi lại phản hồi HTTP vào bảng điều khiển bằng cách sử dụng thuộc XMLHTTPRequest.onreadystatechangetính có chứa trình xử lý sự kiện sẽ được gọi khi readystatechangedsự kiện được kích hoạt.

const 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? 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 onreadystatechangebất động sản có hai phương pháp, readyStatestatuscho phép chúng tôi để kiểm tra trạng thái của yêu cầu của chúng tôi.

Nếu readyStatebằng 4, có nghĩa là yêu cầu đã được thực hiện. Các readyStatetài sản có 5 câu trả lời. Tìm hiểu thêm về nó ở đây.

Ngoài việc trực tiếp thực hiện một cuộc gọi Ajax bằng JavaScript, có nhiều phương pháp khác mạnh mẽ hơn để thực hiện một cuộc gọi HTTP, chẳng hạn như $.Ajaxphương thức jQuery. Tôi sẽ thảo luận về chúng ngay bây giờ.

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 pháp này, bạn cần phải bao gồm thư viện jQuery trong 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 một 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à các tham số khác là tùy chọn. Nó chứa hai tùy chọn gọi lại successerrorđể xử lý phản hồi nhận được.

phương pháp $ .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à một hàm gọi lại.

$ .post

Các $.postphương pháp là một cách khác để gửi dữ liệu đến máy chủ. Nó cần ba tham số: the url, dữ liệu bạn muốn đăng và một hàm gọi lại.

$ .getJSON

Các $.getJSONphương pháp duy nhất lấy dữ liệu đó là ở định dạng JSON. Nó có hai tham số: hàm urlvà một hàm 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 thức này thành một: $.ajaxphương thức, như được thấy trong ví dụ bên dưới:

lấy

fetchlà 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ế, đây fetchlà 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ề “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. Hứa hẹn 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 cách fetchhoạt động về mặt kỹ thuật.

Các fetchchức năng phải mất một tham số yêu cầu: các endpointđịa chỉ URL. 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, fetchcó nhiều lợi thế cho việc 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, bên 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.

Axios

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.

Sử dụng:

Đầu 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 --save

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

import axios from 'axios'

Thứ hai, bạn có thể bao gồm các tiên đề bằng cách sử dụng CDN.

Đưa ra yêu cầu với axios:

Với Axios, bạn có thể sử dụng GETPOSTtruy xuất và đăng dữ liệu từ máy chủ.

ĐƯỢC:

axiosnhận một tham số bắt buộc và cũng có thể nhận một 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ÀI ĐĂNG:

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 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.

Angular HttpClient

Angular has its own HTTP module that works with Angular apps. It uses the RxJS library to handle asynchronous requests and provides many options to perform the HTTP requests.

Making a call to the server using the Angular HttpClient

To make a request using the Angular HttpClient, we have to run our code inside an Angular app. So I created one. If you’re not familiar with Angular, check out my article, learn how to create your first Angular app in 20 minutes.

The first thing we need to do is to import HttpClientModule in app.module.ts

Then, we have to create a service to handle the requests. You can easily generate a service using Angular CLI.

ng g service FetchdataService

Then, we need to import HttpClient in fetchdataService.ts service and inject it inside the constructor.

And in app.component.ts import fetchdataService

//import import { FetchdataService } from './fetchdata.service';

Finally, call the service and run it.

app.component.ts:

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

Kết thúc

Chúng tôi vừa đề cập đến những cách phổ biến nhất để thực hiện một 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 đế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 mạnh mẽ cho một trong những ứng dụng di động của tôi. Tổ chức rất tuyệt 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 đã 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 đó. Gửi cho tôi một email nếu bạn muốn liên hệ - [email protected] .