API là viết tắt của Giao diện lập trình ứng dụng. Api web phổ biến nhất được sử dụng là API chuyển trạng thái đại diện hoặc API RESTful. API web được sử dụng để lấy dữ liệu từ cơ sở dữ liệu và lưu dữ liệu trở lại cơ sở dữ liệu. Sử dụng API Web yêu cầu sử dụng các phương thức yêu cầu HTTP, có các phương thức yêu cầu HTTP khác nhau như GET, POST, PUT, DELETE, v.v. Hãy mô tả ngắn gọn về yêu cầu HTTP được đề cập

• ĐƯỢC. Được sử dụng để yêu cầu dữ liệu từ một điểm cuối
• BƯU KIỆN. Gửi dữ liệu đến một điểm cuối
• XÓA BỎ. Xóa dữ liệu khỏi điểm cuối
• ĐẶT. Cập nhật giá trị bản ghi hoặc dữ liệu tại điểm cuối

Các cách lấy dữ liệu từ API

Có nhiều cách lấy dữ liệu khác nhau

• Bằng cách sử dụng API tìm nạp
• Bằng cách sử dụng thư viện Axios
• Bằng cách sử dụng cú pháp async-await
• Bằng cách sử dụng móc tùy chỉnh
• Bằng cách sử dụng Truy vấn phản ứng

1. Tìm nạp API

Chúng ta có thể tìm nạp dữ liệu bằng cách sử dụng phương thức javascript fetch(). Nó sẽ yêu cầu máy chủ và tải thông tin trên các trang web. Nó sẽ trả lại một lời hứa

Hãy bắt đầu với ví dụ. Chúng ta sẽ tạo một phương thức fetchData(). Nó sẽ gọi 

npm install axios
import axios from "axios";

import React, { useEffect, useState } from "react";

function App() { 
  const [user, setUser] = useState([]);

  const fetchData = () => {
    return fetch("https://jsonplaceholder.typicode.com/users")
          .then((response) => response.json())
          .then((data) => setUser(data));
  }

  useEffect(() => {
    fetchData();
  },[])

  return (
    

      
User List
      

        {user && user.length > 0 && user.map((userObj, index) => (
            
{userObj.name}
          ))}
      
    
  );
}

export default App;

2. trục

Axios là một thư viện javascript mà chúng tôi sử dụng để thực hiện các yêu cầu HTTP giống như tìm nạp(). Có một sự khác biệt giữa hai cái này là trong hàm tìm nạp () chúng ta phải chuyển đổi kết quả thành đối tượng JSON nhưng trong Axios nó đã trả về kết quả dưới dạng đối tượng JSON nên chúng ta không cần phải chuyển đổi nó

Hãy lấy ví dụ về thư viện Axios. Đầu tiên, chúng ta phải cài đặt thư viện Axios, sau đó chúng ta phải nhập Axios từ Axios

npm install axios
import axios from "axios";

const fetchData = () => {
    return axios.get("https://jsonplaceholder.typicode.com/users")
          .then((response) => setUser(response.data));
  }

  useEffect(() => {
    fetchData();
  },[])

4. Sử dụng async và chờ đợi

Chúng tôi sử dụng Async-Await vì đây là một kỹ thuật không đồng bộ được vận hành thông qua vòng lặp sự kiện. Các chức năng không đồng bộ sẽ luôn trả về một giá trị. Đây là cách ưa thích để tìm nạp dữ liệu từ API vì nó cho phép chúng tôi xóa. then() gọi lại và trả về dữ liệu được giải quyết không đồng bộ. Trong khối async, chúng ta có thể sử dụng chức năng Await để đợi lời hứa

async function fetchData() {
    try {
      const response = await axios.get("https://jsonplaceholder.typicode.com/users")
      setUser(response.data)
    } catch (error) {
      console.error(error);
    }
  }

  useEffect(() => {
    fetchData();
  },[])

4. móc tùy chỉnh

Chúng ta hãy hiểu ngắn gọn rằng móc tùy chỉnh là gì. Vì vậy, chúng tôi sử dụng móc tùy chỉnh khi chúng tôi có logic thành phần có thể được sử dụng bởi các thành phần khác trong ứng dụng của chúng tôi. Về cơ bản, nó là một thành phần chức năng của React có tên sẽ bắt đầu bằng “use” như useFetch. Móc tùy chỉnh có thể sử dụng một hoặc nhiều móc React bên trong chúng

Chúng tôi cũng có thư viện React React-Fetch-Hook để lấy dữ liệu từ API. Thư viện này có một số thuộc tính mà chúng tôi có thể sử dụng như dữ liệu, nó sẽ cung cấp cho chúng tôi dữ liệu được tìm nạp từ API, lỗi chúng tôi sử dụng để xử lý lỗi và isLoading được sử dụng để tải

Đầu tiên chúng ta phải cài đặt thư viện đó để sử dụng

npm i react-fetch-hook

import useFetch from "react-fetch-hook"

const {data} = useFetch("https://jsonplaceholder.typicode.com/users");
console.log(data);

Bây giờ, chúng ta sẽ tạo useFetch hook tùy chỉnh

useFetch.js

import { useEffect, useState } from "react";
import axios from "axios";

const useFetch = (method, url, body) => {
  const [isLoading, setIsLoading] = useState(false);
  const [apiData, setApiData] = useState([]);
  const [apiError, setApiError] = useState('');

  useEffect(() => {
    setIsLoading(true);
    const fetchData = async () => {
      try {
        const response = await axios({
          method: method,
          url: url,
          data: body
        });
        const data = await response?.data;

        setApiData(data);
        setIsLoading(false);
      } catch (error) {
        setApiError(error);
        setIsLoading(false);
      }
    };

    fetchData();
  }, [url, method, body]);

  return { isLoading, apiData, apiError };
};

export default useFetch;

App.js

import useFetch from "../src/useFetch";

function App() { 
  const { isLoading, apiError, apiData } = useFetch(
    "GET",
    "https://jsonplaceholder.typicode.com/users",
    {}
  );

5. Truy vấn phản ứng

Để tối ưu hóa các hoạt động yêu cầu trong ứng dụng của chúng tôi, chúng tôi sử dụng thư viện React Query giúp chúng tôi xử lý bộ nhớ đệm ứng dụng phức tạp. Viết trong React Query đơn giản hơn nhiều so với React-Redux. Nó thực hiện tìm nạp trước dữ liệu để ứng dụng có thể cập nhật dữ liệu cũ trong nền

Vì vậy, để sử dụng React Query trước tiên chúng ta phải cài đặt thư viện React Query bằng cách

npm i react-query

Vì vậy, để định cấu hình truy vấn phản ứng trong React của chúng tôi. js, chúng ta cần bọc các thành phần của mình bằng thành phần 

npm install axios
import axios from "axios";

import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider } from "react-query";
import App from "./App";

const queryClient = new QueryClient();

const rootElement = document.getElementById("root");
ReactDOM.render(
  
    
      
    
  ,
  rootElement
);

Hãy xem cách chúng tôi tìm nạp dữ liệu bằng useQuery

Đầu tiên, chúng ta phải nhập useQuery từ truy vấn phản ứng. Móc useQuery trả về một số trạng thái mà chúng ta có thể sử dụng trong ứng dụng của mình như isLoading, data, error, Is Error,

import React, { useEffect, useState } from "react";

function App() { 
  const [user, setUser] = useState([]);

  const fetchData = () => {
    return fetch("https://jsonplaceholder.typicode.com/users")
          .then((response) => response.json())
          .then((data) => setUser(data));
  }

  useEffect(() => {
    fetchData();
  },[])

  return (
    

      
User List
      

        {user && user.length > 0 && user.map((userObj, index) => (
            
{userObj.name}
          ))}
      
    
  );
}

export default App;

Chúng tôi sẽ tạo một thành phần chức năng và nhập useQuery trong đó. Sau đó, chúng ta sẽ tạo một hàm async fetchUser() sẽ trả về một mảng người dùng

Để cập nhật dữ liệu, chúng tôi sử dụng hook useMutation

Vì vậy, chúng tôi sử dụng móc đột biến để thực hiện các thao tác như Tạo, Cập nhật, Xóa trong các thành phần của chúng tôi. Chúng tôi sẽ chuyển trọng tải dưới dạng tham số trong chức năng đột biến sau khi lệnh gọi không đồng bộ của chúng tôi hoàn tất, chúng tôi sẽ được chuyển đến onSuccess nơi chúng tôi có thể vô hiệu hóa truy vấn mà chúng tôi đã sử dụng để tìm nạp dữ liệu để chúng tôi có thể nhận dữ liệu cập nhật sau khi cập nhật vào cơ sở dữ liệu

Đầu tiên, chúng ta sẽ xem cách sử dụng useMutation,

import React, { useEffect, useState } from "react";

function App() { 
  const [user, setUser] = useState([]);

  const fetchData = () => {
    return fetch("https://jsonplaceholder.typicode.com/users")
          .then((response) => response.json())
          .then((data) => setUser(data));
  }

  useEffect(() => {
    fetchData();
  },[])

  return (
    

      
User List
      

        {user && user.length > 0 && user.map((userObj, index) => (
            
{userObj.name}
          ))}
      
    
  );
}

export default App;

Vì vậy, bây giờ chúng tôi sẽ vô hiệu hóa truy vấn tìm nạp của mình trong onSuccess. Trước tiên, chúng ta phải khai báo một ứng dụng khách truy vấn mới để có quyền truy cập vào bộ đệm

npm install axios
import axios from "axios";

Vì vậy, trong invalidateQueries, chúng tôi chuyển tên truy vấn tìm nạp ('getUser') sẽ tìm nạp dữ liệu

Phần kết luận

Trong blog này, chúng tôi đã đề cập đến các phương pháp tìm nạp API khác nhau

Trong blog sắp tới của chúng tôi, chúng tôi sẽ cố gắng tìm hiểu về React Hook

Để biết thêm các blog thú vị, hãy truy cập- StatusNeo Blogs

Cảm ơn đã đọc, Ba-Bye cho bây giờ

0 Bình luận

Thích

Các cách khác nhau để tìm nạp dữ liệu từ API trong Reactjs, React, phản ứng js, blog utkarsh chaturvedi, Phát triển web

Làm cách nào để tìm nạp dữ liệu từ MongoDB?

Cách lấy dữ liệu từ cơ sở dữ liệu trong phản ứng JS?

Tôi có thể kết nối MongoDB với React không?

Làm cách nào để tìm nạp dữ liệu từ MongoDB bằng axios?