Cách Sử Dụng API Trong React Bằng Cách Sử Dụng Fetch Và Axios

API (Giao diện lập trình ứng dụng) là một tập hợp các giao thức cho phép ứng dụng gửi yêu cầu đến máy chủ và nhận phản hồi.

Thông qua các API, bạn có thể tích hợp các phần mềm vào ứng dụng của mình mà không cần thực hiện các công việc phức tạp. Quá trình sử dụng API này trong ứng dụng của bạn thường được gọi là sử dụng API. Ví dụ: nếu bạn muốn hiển thị một vị trí nhất định trên trang web của mình, bạn sẽ sử dụng API Google Maps thay vì triển khai chức năng bản đồ từ đầu. Do đó, các API giảm bớt khối lượng công việc và tiết kiệm thời gian cho bạn.

Để tìm hiểu cách sử dụng API REST trong React bằng cách sử dụng Fetch và Axios, bạn sẽ xây dựng một ứng dụng React đơn giản lấy thông tin ngẫu nhiên về mèo từ API khi bạn nhấp vào một nút.

Mục Lục

• Các loại API
• Điều kiện tiên quyết
• Tạo một ứng dụng React
• Sử dụng API REST bằng cách sử dụng tìm nạp
  • Triển khai API tìm nạp
• Sử dụng các API REST bằng Axios
  • Triển khai Axios
• Sử dụng nhiều hơn cho các API với React

Các loại API

API có thể được phân loại theo tính khả dụng hoặc trường hợp sử dụng. Về tính khả dụng, các API có thể là API công khai, riêng tư, đối tác hoặc tổng hợp. Khi được phân loại theo mục đích, chúng có thể là cơ sở dữ liệu, từ xa, hệ điều hành hoặc API web. Trong bài viết này, chúng ta sẽ sử dụng một loại API web được gọi là API REST (Trạng thái đại diện).

Các API REST cho phép bạn lấy dữ liệu từ một nguồn thông qua một URL. Trong React, có một số phương pháp bạn có thể sử dụng để sử dụng các API REST. Bài viết này thảo luận về hai phương pháp phổ biến nhất là API tìm nạp JavaScript và ứng dụng khách HTTP dựa trên lời hứa Axios.

Liên quan: API REST là gì và cách bạn có thể lấy dữ liệu cho ứng dụng hoặc trang web của mình

Điều kiện tiên quyết

Để làm theo hướng dẫn này, bạn nên có:

• Hiểu biết cơ bản về JavaScript.

• Kiến thức cơ bản về React và React hooks.

• NPM được cài đặt cục bộ trên máy của bạn.

• Đã cài đặt trình soạn thảo văn bản hoặc IDE mà bạn chọn.

Tạo một ứng dụng React

Đầu tiên, bạn sẽ cần tạo một ứng dụng React. Sao chép lệnh sau trong thiết bị đầu cuối của bạn để thiết lập môi trường phát triển React.

npx create-react-app catfact

Khi lệnh hoàn tất thực thi, hãy mở catfact thư mục trong trình soạn thảo văn bản của bạn. Bạn sẽ viết mã của mình trong tệp App.js trong src vì vậy hãy tiếp tục và xóa mã không cần thiết.

import "./App.css";function App() {return (<div className="App"><h2>Press the button for a random cat fact!</h2><hr /><button>Get Cat fact</button></div>);}export default App;

Tiếp theo, tạo một giao diện người dùng đơn giản sẽ sử dụng để hiển thị thông tin mèo ngẫu nhiên.

Trong app.js

import './App.css';function App() {return (<div className="App"><h2>Press the button for a random cat fact!</h2><hr/><button>Get Cat fact</button></div>);}export default App;

Để tạo kiểu ứng dụng của bạn, hãy thêm mã sau vào app.css tập tin.

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@700;500&display=swap');.App {font-family: 'Playfair Display', serif;margin: 20px 15vw;}h2 {font-family: 'Playfair Display', serif;font-weight: 700;font-size: 3em;}button {padding: 1em 1.2em;border: none;font-size: 1em;background-color: #131212;color: #ffffff;border-radius:0.5em;cursor: pointer;}button:hover{background-color:#3b3b3b;}

Ứng dụng của bạn bây giờ sẽ trông như thế này.

Trong các bước tiếp theo, bạn sẽ tìm nạp dữ liệu từ API và hiển thị nó trong ứng dụng.

Liên quan: Cách tạo ứng dụng React đầu tiên của bạn với JavaScript

Sử dụng API REST bằng cách sử dụng tìm nạp

API tìm nạp là một giao diện cho phép bạn lấy tài nguyên từ một API thông qua các yêu cầu HTTP. Các tìm về() phương thức nhận URL của đường dẫn đến tài nguyên như một đối số bắt buộc và trả về một lời hứa có thể giải quyết một phản hồi.

Cú pháp cơ bản của tìm về() như sau:

fetch(‘url to resource’).then(response => // handle response).catch(err => // handle error)

Triển khai API tìm nạp

Trong React, API Tìm nạp được sử dụng giống như cách nó được sử dụng trong JavaScript thuần túy.

fetch("https://catfact.ninja/fact").then(response => response.json()).then(data => // handle data).catch(err => // handle error)

Trong dòng đầu tiên của đoạn mã trên, bạn đang chuyển URL API đến tìm về() phương pháp. tìm về() trả về phản hồi HTTP được chuyển đổi thành JSON bằng cách sử dụng json () phương pháp. Trong dòng thứ ba, bạn có quyền truy cập vào dữ liệu mà sau đó bạn có thể sử dụng trong ứng dụng. Cuối cùng, khối bắt cho phép bạn xử lý lỗi một cách duyên dáng.

Để triển khai yêu cầu tìm nạp trong thành phần ứng dụng, bạn sẽ sử dụng React hooks. Bằng cách sử dụng useEffect hook, ứng dụng của bạn sẽ thực hiện yêu cầu sau khi thành phần tải và useState hook sẽ tạo và cập nhật trạng thái của thành phần. Theo dõi trạng thái đảm bảo rằng thành phần hiển thị lại khi API tìm nạp trả về phản hồi.

Liên quan: Hooks: The Hero of React

import useState and useEffect.import { useEffect, useState } from 'react'

Tạo trạng thái nắm giữ dữ kiện về mèo và chức năng cập nhật thông tin đó.

const [fact, setFact] = useState('')

Tiếp theo, tạo một hàm để thực hiện yêu cầu GET tới API và gọi nó trong useEffect cái móc.

const fetchFact = () => {fetch("https://catfact.ninja/fact").then((response) => response.json()).then((data) => setFact(data.fact));}useEffect(() => {fetchFact()}, []);

Tệp app.js của bạn bây giờ sẽ giống như sau:

import "./App.css";import { useEffect, useState } from "react";function App() {const [fact, setFact] = useState("");const fetchFact = () => {fetch("https://catfact.ninja/fact").then((response) => response.json()).then((data) => setFact(data.fact));}useEffect(() => {fetchFact()}, []);return (<div className="App"><h2>Press the button for a random cat fact!</h2><hr /><button>Get Cat fact</button><p>{fact}</p></div>);}export default App;

Bây giờ bạn sẽ có thể thấy một thông tin ngẫu nhiên về mèo được hiển thị trong trình duyệt của bạn.

Tiếp theo, viết mã để hiển thị một dữ kiện ngẫu nhiên khi nút được nhấp.

Sửa đổi nút để bao gồm một trong một cái nhấp chuột sự kiện và chức năng xử lý của nó.

<button onClick= {() => handleClick()}>Get Cat fact</button>

Xác định handleClick () chức năng như hình dưới đây.

const handleClick = () => {fetchFact()}

Bây giờ, khi bạn nhấp vào nút, handleClick () hàm sẽ gọi fetchData () sẽ thực hiện yêu cầu API và cập nhật trạng thái với một thông tin ngẫu nhiên mới. Do đó, giao diện người dùng ứng dụng sẽ cập nhật để hiển thị thông tin hiện tại.

Sử dụng các API REST bằng Axios

Thay vì tìm về(), bạn có thể sử dụng các API với Axios. Thích tìm về(), Axios cho phép bạn thực hiện các yêu cầu tới một điểm cuối API. Tuy nhiên, có một số khác biệt giữa hai điều này.

• Axios tự động trả về phản hồi trong JSON trong khi bạn phải chuyển đổi nó thành JSON khi sử dụng API tìm nạp.

• Axios chỉ yêu cầu một lệnh gọi lại .then () không giống như API Tìm nạp.

• Axios tương thích với các trình duyệt chính trong khi Tìm nạp chỉ được hỗ trợ trong Chrome 42+, Edge 14 +, Firefox 39+ và Safari 10+

Triển khai Axios

Cài đặt Axios bằng cách chạy lệnh sau.

npm install axios

Sau khi cài đặt xong, hãy nhập gói Axios vào thành phần ứng dụng của bạn và sửa đổi fetchFact () chức năng sử dụng nó.

import axios from ‘axios’const fetchFact = () => {axios.get("https://catfact.ninja/fact").then((response) => {setFact(response.data.fact)});}

Đó là nó! Ứng dụng của bạn sẽ hiển thị một dữ kiện ngẫu nhiên về mèo khi nó tải trong trình duyệt và khi bạn nhấp vào nút.

Sử dụng nhiều hơn cho các API với React

Bạn có thể sử dụng các API REST trong React bằng nhiều phương pháp khác nhau. Trong hướng dẫn này, bạn đã học cách sử dụng Tìm nạp và Axios để tìm nạp thông tin ngẫu nhiên từ API REST. Các trường hợp sử dụng API trong các ứng dụng thế giới thực là vô tận.

Ví dụ: thông qua các API thanh toán như Stripe và PayPal, các cửa hàng có thể dễ dàng xử lý các giao dịch trực tuyến của khách hàng mà không cần phải tự triển khai chức năng. Do đó, ngay cả những người dùng ít hiểu biết về công nghệ cũng có thể xây dựng các ứng dụng hữu ích phục vụ nhu cầu của họ.

Xác thực API là gì và nó hoạt động như thế nào?

Làm thế nào để bạn chứng minh rằng người muốn truy cập dữ liệu quan trọng là người mà họ nói? Đó là nơi xác thực API đến …

Đọc tiếp

Giới thiệu về tác giả

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký