Cách lấy dữ liệu từ api trong javascript?

Phương pháp này được sử dụng để thu thập dữ liệu từ bất kỳ API nào đáp ứng yêu cầu của khách hàng dưới dạng JSON hoặc XML. Cú pháp của phương thức tìm nạp khá đơn giản, chỉ cần một đối số bắt buộc và một tham số tùy chọn là

tìm nạp (URL , tùy chọn );

• URL. URL của API để tiếp cận và yêu cầu phản hồi ở dạng JSON hoặc XML
• Tùy chọn. Các tham số tùy chọn giúp chúng tôi thay đổi yêu cầu từ “nhận” thành “đăng” và các biến thể khác
• Ghi chú. Phương thức tìm nạp trả về một lời hứa

Để sử dụng phương thức tìm nạp () trong JavaScript của bạn, bạn cần gói nó vào một hàm không đồng bộ và gọi hàm tìm nạp () này bằng từ khóa đang chờ. Với hàm async, cú pháp được định nghĩa là

hàm không đồng bộ function_Identifier (URL) {

const = đang chờ tải (URL);

dữ liệu var = đang chờ phản hồi. json();

}

Tìm nạp dữ liệu từ API bằng phương thức tìm nạp () trong JavaScript

Để kiểm tra phương thức tìm nạp () để tìm nạp dữ liệu từ API, bạn cần một API giả hoặc API giả. Với mục đích này, chúng tôi đang sử dụng giả API được cung cấp bởi Req. Res với URL “https. // yêu cầu. trong/api/sản phẩm/3”

Điều thứ hai mà chúng ta cần là hiểu biết cơ bản về cách hoạt động của các promise trong JavaScript, để tìm hiểu về các promise trong JavaScript, bạn có thể truy cập liên kết này

Tiếp theo, chúng ta cần một trang HTML giả với một số yếu tố cơ bản bên trong nó. Đối với ví dụ này, chúng tôi đã sử dụng các dòng sau trong HTML

< trung tâm >

< div >< p >Fetching Data from API</p></div>

< /trung tâm >

Điều này sẽ cung cấp cho chúng tôi trang web sau

Đối với mã JavaScript, điều đầu tiên chúng ta cần làm là lưu trữ URL trong một biến riêng với dòng sau

const URL = "https. // yêu cầu. trong/api/products/3";

Sau đó, chúng tôi xác định hàm async để lấy dữ liệu từ API bằng URL mà chúng tôi vừa lưu trữ với các dòng sau

hàm không đồng bộ getDataFromApi (URL) {

const = đang chờ tải (URL);


dữ liệu var = đang chờ phản hồi. json();

bảng điều khiển. log( dữ liệu );

}

Những gì chúng tôi đang làm trong mã này là chúng tôi đang chờ một lời hứa từ tìm nạp (URL) và lưu trữ lời hứa đó bên trong biến phản hồi

Khi chúng tôi nhận được lời hứa, chúng tôi cần chuyển đổi nó thành định dạng JSON bằng cách sử dụng phản hồi. json(). Kể từ khi phản hồi. json() cũng là một lời hứa trả về dữ liệu, chúng tôi sử dụng từ khóa chờ đợi

Cuối cùng, chúng tôi đang in ra dữ liệu được tìm nạp từ API bằng chức năng nhật ký bảng điều khiển

Bây giờ, tất cả những gì chúng ta cần làm là gọi hàm async này và chuyển URL của API bằng dòng sau

getDataFromApi (< strong >URLstrong>);

Đoạn mã hoàn chỉnh là

const URL = "https. // yêu cầu. trong/api/products/3";

hàm không đồng bộ getDataFromApi (URL) {
const = đang chờ tải (URL);
dữ liệu var = đang chờ phản hồi. json();
bảng điều khiển. log( dữ liệu );
}

getDataFromApi (URL);

Nếu bạn chạy trang web này và đi tới bảng điều khiển trong công cụ dành cho nhà phát triển của trình duyệt, bạn sẽ thấy đầu ra sau

Vậy là xong, bạn đã lấy thành công dữ liệu từ API bằng JavaScript

Phần kết luận

Phương thức tìm nạp () từ API tìm nạp có thể được sử dụng để tìm nạp dữ liệu từ một API trong vanilla JavaScript. Khi làm việc với các ứng dụng thực tế, bạn cần biết cách tương tác với API để gửi và nhận dữ liệu. Trong bài đăng này, chúng tôi đã giới thiệu phương thức tìm nạp () để gửi yêu cầu tới API giả và nhận dữ liệu từ API đó, sau đó chuyển đổi dữ liệu đó thành JSON với sự trợ giúp của lời hứa để có thể sử dụng dữ liệu đó trong ứng dụng của chúng tôi

Làm cách nào để truy xuất dữ liệu từ API?

API tìm nạp hoạt động như thế nào trong JavaScript?

Làm cách nào để lấy dữ liệu JSON từ API REST trong JavaScript?

Làm cách nào để gọi API bằng JavaScript?