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

Nhưng tôi thấy thật bất tiện khi viết toàn bộ mã và đôi khi tôi can thiệp vào nó. Kết quả sau đó cho thấy một sự không chính xác

Ngoài ra, nếu bạn muốn hiểu cách hiển thị dữ liệu từ API, hướng dẫn này sẽ hữu ích

Vì vậy, hãy bắt đầu

API có hoạt động hay không?

Hãy để tôi chia sẻ một ví dụ

Tôi đang làm việc trong một công ty khởi nghiệp vào thời điểm đó. Người hướng dẫn đã đưa cho tôi một số mã API mà tôi có thể đưa vào cơ sở mã. Sau 15 phút, tôi phát hiện ra rằng API không hoạt động bình thường

Vì vậy, trước hết, hãy xác định xem nó có hoạt động hay không

Bạn có thể làm điều đó theo ba cách

Hãy xem một ví dụ từ API giả miễn phí i. e JSONPlaceholder

Bạn có thể nhận được nhiều API giả khác nhau từ đây như số lượng bài đăng, số lượng người dùng và nhiều thứ khác

1. Cách đầu tiên là nhấp trực tiếp vào liên kết hoặc truy cập URL đó. Ví dụ mình bấm vào số lượng bài viết thì nó hiện ra như hình bên dưới

Tôi có một tiện ích mở rộng cung cấp cho tôi thông tin chính xác hơn về dữ liệu trong API. JSONView là tên của tiện ích mở rộng. Bạn cũng có thể cài đặt và sử dụng nó bên trong Chrome

Nếu một API có sẵn công khai, chúng tôi có thể biết liệu nó có hoạt động hay không. Bạn cũng có thể thấy lượng dữ liệu bên trong API rõ ràng hơn

2. Phương pháp thứ hai là sử dụng Postman [Bạn cũng có thể sử dụng ứng dụng khách Thunder]. Postman giúp chúng tôi sử dụng API dễ dàng hơn. Chỉ cần nhập URL API và nhấp vào nút truyền để truy xuất dữ liệu

Như bạn có thể thấy, chúng tôi cũng đang lấy dữ liệu ở đây. Người đưa thư có thể kết nối với cả API công khai và riêng tư. Cần có mã thông báo mang hoặc các loại quyền khác đối với API riêng tư

Nếu bạn muốn tìm hiểu cách làm việc với API bằng Postman, hãy xem video này

3. Phương pháp thứ ba là sử dụng

npm i axios

0 từ bất kỳ trình soạn thảo mã nào. Điều này sẽ được thảo luận thêm sau

Khởi tạo ứng dụng React

Để bắt đầu, bạn phải khởi tạo ứng dụng React với,

npx create-react-app my-app

Sau đó, sử dụng lệnh sau để cài đặt Axios

npm i axios

Tạo thành phần chức năng

Tạo một thư mục thành phần trong dự án React của bạn hoặc một tệp dựa trên nhu cầu của bạn

Được. js là tên tệp của tôi

Tạo một thành phần chức năng giống như thành phần được hiển thị bên dưới trong mã của bạn

import React from 'react'function Get[] {
return [

]
}
export default Get;

Nhập các phụ thuộc mà chúng tôi sẽ sử dụng ngay bây giờ

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

Và tạo một useState Hook như bên dưới,

const [data, setData] = useState[‘’];

Ở đây chúng tôi sẽ đặt dữ liệu mà chúng tôi nhận được từ API. Ban đầu sẽ không có dữ liệu

Sử dụng Axios để lấy dữ liệu API

Cho đến nay, chúng tôi chưa làm việc với API. Bắt đầu nào

Đầu tiên, tạo một phương thức với bất kỳ tên nào bạn thích

const getAllData = [] => {axios.get[
"//jsonplaceholder.typicode.com/users"].then[[response] => {console.log[response.data];
setData[response.data];}].catch[[error] => {
console.log[error];
}];
};

Chúng tôi đang sử dụng Axios tại đây và trong vòng

npm i axios

1, chúng tôi chỉ định URL mà chúng tôi muốn có dữ liệu API từ đó. Sau đó, chúng tôi sẽ đặt dữ liệu và nếu có lỗi, nó sẽ in nó

Hãy cùng xem;

Tuy nhiên do chưa gọi nên kỹ thuật trên sẽ bị fail

Vì vậy, chúng tôi sẽ sử dụng

npm i axios

3 cho điều đó

useEffect[[] => {
 getAllData[];
}, []];

Sử dụng Axios để hiển thị dữ liệu

Bây giờ chúng tôi cũng không thể xem dữ liệu. Vì chúng tôi đã không hiển thị nó cho đến nay

Hãy hiển thị nó

{data ? [ 
data.map[
[data] => {return [

{data.name}

];
 }]] : [
No data yet
]}

Toán tử ternary được sử dụng ở đây. Và tôi đã thêm một điều kiện nói rằng nếu có một số dữ liệu ở đó, chỉ hiển thị một div có tên dữ liệu, nếu không thì không in dữ liệu

Đó là tất cả. Chúng tôi đã sử dụng Axios để lấy dữ liệu từ API và hiển thị dữ liệu đó

Đây là một mã hoàn chỉnh để được hỗ trợ của bạn

import React from 'react'
import { useState, useEffect } from "react";
import axios from "axios"function Get[] {
    const [data, setData]  = useState[''];
    const getAllData = [] => {
        axios
          .get["//jsonplaceholder.typicode.com/users"]
          .then[[response] => {
            console.log[response.data];
            setData[response.data];
          }]
          .catch[[error] => {
            console.log[error];
          }];
    }
    useEffect[[] => {
      getAllData[];
    },[]];return [
        
            {data ? 
                data.map[data => {
                    return[
                       

                         
{data.name}

                       

                    ]
                }] : 
No data yet
 }
        
    ]
}
export default Get;

Khi bạn nhập thành phần chức năng này trong Ứng dụng. js, nó sẽ hoạt động

Ở đây, chúng tôi đang nhận dữ liệu thậm chí hiển thị dữ liệu bên trong tab Bảng điều khiển

Bây giờ bạn cũng có thể làm cho nó rõ ràng hơn. Thay vì thêm logic vào câu lệnh return, bạn có thể xây dựng một phương thức và gọi nó, như bên dưới

import React from "react";
import { useState, useEffect } from "react";
import axios from "axios";function Get[] {
  const [data, setData] = useState[""];
  
  const getAllData = [] => {
    axios
      .get["//jsonplaceholder.typicode.com/users"]
      .then[[response] => {
        console.log[response.data];
        setData[response.data];
      }]
      .catch[[error] => {
        console.log[error];
      }];
  };
  
  useEffect[[] => {
    getAllData[];
  }, []];  const displayData = [] => {
    return data ? [
      data.map[[data] => {
        return [
          

            
{data.name}

          

        ];
      }]
    ] : [
      
No data yet

    ];
  }return [
    
      {displayData[]}
    
  ];
}export default Get;

Đó là kết thúc của nó. Bạn đã hiển thị dữ liệu API trong ứng dụng của mình. Và cũng đã tìm hiểu về truy xuất dữ liệu API bên trong ứng dụng phản ứng

Thanks

Nếu bạn thích công việc của tôi và muốn ủng hộ nó, bạn có thể mua cho tôi một tách cà phê

Thêm nội dung bằng tiếng Anh. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Nhận quyền truy cập độc quyền để viết các cơ hội và lời khuyên trong cộng đồng của chúng tôi Discord

Làm cách nào để lấy dữ liệu từ API bằng Axios?

Cách tìm nạp dữ liệu trong phản ứng Axios?

Tôi có thể sử dụng Axios và tìm nạp không?

Sự khác biệt giữa việc sử dụng hàm tìm nạp[] và Axios là gì?