HomeLập trìnhJavaScriptDưới đây là...

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

1*zXtlRe4yRF3tZkFFvBhZeA
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, readyStatestatus cho phép chúng tôi kiểm tra trạng thái yêu cầu của chúng tôi.

Đọc thêm  JavaScript không đồng bộ – Giải thích về cuộc gọi lại, lời hứa và không đồng bộ/đang chờ
1*UfZf6qaZwNh5Mptft4WIZA

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.

1*vZ4BqVQfsvtpJm_RCsCE2Q

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 successerror để 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.

1*2koN5FJuT68WIyRKTihe5w

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

1*ql6Yp1EJfD7850GXhErwyw

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

1*hdcFdVHiBiRAo1YOi_Kt0Q

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:

1*soPARjfQXMcZ5ccPK1QMmA

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 thêm  Ép buộc và chuyển đổi loại trong JavaScript – Giải thích bằng các ví dụ về mã
1*kz6k4VRs0RiVCasWR0pCow

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:

1*QasrBgYZcU4BBFHqD2bBdg

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

Sau đó, 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 GETPOST để lấy và đăng dữ liệu từ máy chủ.

ĐƯỢC:

1*4wmqiPsSN5mdgjJiRaKVZg

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:

1*ey6-vwsrm9RAhyoU15u6xQ

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.

1*40Pji4utVKPpC7-dePfC6Q

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.

Đọc thêm  Cách sử dụng các phương thức flat() và flatMap() để làm phẳng mảng trong JavaScript

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

1*iFuW5Fbp91VR5gwQ6XNMEQ

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  FetchdataService

Sau đó, 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.

1*kKwELAhSSpn8DvIgdOfcQ

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:

1 *OrRe183Yaclt19n5ZQ194Q

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





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status