Giới thiệu
Khi phát triển ứng dụng web – chúng tôi thường xuyên truy cập các tài nguyên được lưu trữ trên máy chủ. Yêu cầu, gửi hoặc thực hiện các hoạt động khác trên tài nguyên được thực hiện thông qua các yêu cầu HTTP. Những yêu cầu này được gửi từ máy khách đến máy chủ trên máy chủ. Khi thực hiện yêu cầu HTTP, máy khách sử dụng một URL (Bộ định vị tài nguyên thống nhất) và một trọng tải chứa thông tin cần thiết để truy cập tài nguyên máy chủ.
Năm phương thức yêu cầu HTTP phổ biến là GET, PUT, POST, PATCHvà DELETE. Các phương pháp này cho phép chúng tôi thực hiện các hoạt động CRUD tiêu chuẩn.
Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo một yêu cầu GET HTTP trong React bằng cách sử dụng Axios hoặc API Fetch, cũng như cách thực hiện điều này trong cả lớp và các thành phần chức năng.
Yêu cầu GET là gì?
GET là một phương thức yêu cầu HTTP được sử dụng để lấy tài nguyên từ máy chủ.
Axios và Fetch API là hai phương pháp chính để thực hiện các yêu cầu HTTP.
- API tìm nạp là một mô-đun JavaScript dựa trên lời hứa được tích hợp sẵn để truy xuất tài nguyên từ máy chủ hoặc điểm cuối API.
- Axios là một thư viện máy khách HTTP dựa trên lời hứa giúp việc gửi các yêu cầu HTTP không đồng bộ đến các điểm cuối REST trở nên đơn giản. Đây là một thư viện bên ngoài phải được cài đặt.
Trong bài viết này, chúng ta sẽ xem cách thực hiện các yêu cầu GET trong các thành phần chức năng React bằng cách sử dụng các phương thức Fetch API và Axios, sau đó là cách thực hiện tương tự trong các thành phần dựa trên lớp.
Cách thực hiện yêu cầu GET HTTP trong các thành phần chức năng của React
Một thành phần chức năng được tạo khi một hàm JavaScript (bình thường hoặc ES6) trả về một phần tử React (JSX). Chúng tôi sử dụng các móc React khi làm việc với các thành phần chức năng, điều này rất quan trọng khi thực hiện các yêu cầu GET.
Chúng tôi sẽ sử dụng useState() và useEffect() móc câu. Vì useEffect() hook hiển thị ngay lập tức khi ứng dụng gắn kết, chúng tôi luôn thực hiện các yêu cầu GET bên trong nó và chúng tôi sử dụng useState() móc để lưu trữ dữ liệu / phản hồi của chúng tôi.
Cách thực hiện yêu cầu GET HTTP trong Thành phần chức năng của React bằng API tìm nạp
Sản phẩm fetch() phương thức chấp nhận một đối số bắt buộc – URL tới tài nguyên mà chúng tôi muốn tìm nạp, cũng như một đối số tùy chọn cho biết phương thức yêu cầu. Giá trị mặc định cho đối số tùy chọn đó là GET, vì vậy không cần thiết phải đặt nó khi thực hiện yêu cầu GET.
Sau đó, API Tìm nạp trả về một Promise, vì vậy chúng tôi có thể sử dụng then() và catch() các phương pháp xử lý thành công hay thất bại:
import { useState, useEffect } from 'react';
const App = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
return (
);
};
Đây là giao diện của một yêu cầu GET tiêu chuẩn. Bây giờ, hãy phân tích những gì chúng ta đã làm cho đến nay để bạn hiểu rõ hơn về đoạn mã trên. Trước hết, chúng tôi đã tạo một trạng thái để chứa tất cả các tài nguyên/bài đăng mà chúng tôi sẽ tìm nạp từ posts API:
const [posts, setPosts] = useState([]);
Sau đó, chúng tôi sử dụng useEffect() hook và viết yêu cầu GET của chúng tôi vào đó để yêu cầu được kích hoạt ngay sau khi ứng dụng gắn kết:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
Sau đó, chúng tôi đã tạo một yêu cầu tìm nạp trong useEffect() hook và chuyển URL mà chúng tôi có thể sử dụng để truy cập vào máy chủ. Vì điều này trả lại một lời hứa, chúng tôi đã sử dụng then() phương pháp. Bởi vì phương thức này trả về một đối tượng phản hồi chứ không phải JSON, trước tiên, chúng tôi đã chuyển đổi dữ liệu sang định dạng JSON:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
}, []);
Sau đó, chúng tôi tiến hành lấy các bài đăng / dữ liệu và lưu trữ chúng ở trạng thái chúng tôi đã tạo trước đó:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
}
}, []);
Cuối cùng, chúng tôi sử dụng catch() phương pháp xử lý lỗi:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
Chúng tôi đã thực hiện yêu cầu GET và lưu dữ liệu của mình vào trạng thái mà chúng tôi đã tạo. Bây giờ chúng ta có thể sử dụng dữ liệu trong ứng dụng React của mình.
Cách thực hiện yêu cầu GET HTTP trong thành phần chức năng của React với Axios
Ngoài API Tìm nạp, chúng tôi cũng có thể sử dụng Axios để gửi các yêu cầu GET. Axios là một thư viện máy khách HTTP dựa trên lời hứa giúp việc gửi các yêu cầu HTTP không đồng bộ đến các điểm cuối REST trở nên đơn giản.
Nếu chúng ta muốn sử dụng Axios, một thư viện bên ngoài, trước tiên chúng ta phải cài đặt nó trong dự án của mình bằng cách chạy lệnh sau trong thư mục dự án của chúng ta:
$ npm install axios
Sau khi cài đặt thành công Axios, chúng ta có thể tiến hành thực hiện yêu cầu GET:
import { useState, useEffect } from 'react';
import axios from 'axios';
const App = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts?_limit=10')
.then((response) => {
setPosts(response.data);
})
.catch((err) => {
console.log(err);
});
}, []);
return (
);
};
Xem hướng dẫn thực hành, thực tế của chúng tôi để học Git, với các phương pháp hay nhất, các tiêu chuẩn được ngành công nghiệp chấp nhận và bảng lừa đảo đi kèm. Dừng lệnh Googling Git và thực sự học nó!
Điều này trông gọn gàng hơn nhiều so với API Tìm nạp! Xem qua đoạn mã ở trên, chúng tôi đã bắt đầu bằng cách nhập Axios vì nó là một thư viện bên ngoài mà chúng tôi đã cài đặt:
import axios from 'axios';
Sau đó, chúng tôi thực hiện yêu cầu GET trong useEffect() hook như chúng tôi đã làm đối với API Tìm nạp, nhưng lần này cú pháp hơi khác một chút:
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts?_limit=10')
.then((response) => {
setPosts(response.data);
})
.catch((err) => {
console.log(err);
});
}, []);
Ngược lại với phương pháp Fetch API, không có tùy chọn nào được yêu cầu để khai báo phương thức. Chúng tôi chỉ cần đính kèm phương thức vào cá thể và truy vấn nó, cũng không cần chuyển đổi dữ liệu vì nó trả về nó dưới dạng JSON.
Cách thực hiện yêu cầu GET HTTP trong thành phần lớp của React
Thành phần lớp là một lớp ES6 trả về JSX và yêu cầu sử dụng các phần mở rộng React. Trước khi ra đời các hook, đây là phương pháp được sử dụng phổ biến nhất (tức là các phiên bản 16.8 trước đó) vì trạng thái không thể được sử dụng trong các thành phần chức năng.
Bất chấp sự sẵn có của hook, nhiều người vẫn tiếp tục sử dụng các thành phần lớp. Hãy xem làm thế nào chúng ta có thể sử dụng constructor() thuộc tính trạng thái của phương thức và ComponentDidMount() phương thức vòng đời để thực hiện các yêu cầu GET HTTP trong React với các thành phần lớp.
Cách thực hiện yêu cầu GET HTTP trong các thành phần lớp của React bằng API tìm nạp
Điều này rất giống với cách chúng tôi thực hiện GET yêu cầu trong các thành phần chức năng. Sự khác biệt duy nhất là bây giờ chúng tôi sẽ sử dụng tài sản nhà nước trong constructor() phương pháp hơn là useState() cái móc. Ngoài ra, chúng tôi sẽ xử lý GET yêu cầu trong ComponentDidMount() vòng đời hơn là useEffect() hook, để yêu cầu này được kích hoạt sau khi ứng dụng của chúng tôi gắn kết:
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => this.setState({ posts: data }))
.catch((error) => console.log(error));
}
render() {
const { posts } = this.state;
return (
);
}
}
Trong đoạn mã trên, chúng tôi đã sử dụng phương thức khởi tạo để khởi tạo trạng thái của đối tượng nhằm lưu trữ tài nguyên/dữ liệu mà chúng tôi sẽ nhận được từ máy chủ/API của mình:
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
Sau đó, chúng tôi thực hiện yêu cầu GET của mình trong componentDidMount() phương pháp vòng đời để nó được kích hoạt khi ứng dụng được cài đặt:
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => this.setState({ posts: data }))
.catch((error) => console.log(error));
}
state là một đối tượng chứa nhiều trạng thái, trước tiên chúng tôi phá hủy nó để có được posts trạng thái, sau này có thể được sử dụng:
render() {
const { posts } = this.state;
return (
);
}
Cách thực hiện yêu cầu GET HTTP trong các thành phần lớp của React bằng Axios
Như chúng ta đã thấy với các thành phần chức năng, chúng ta có thể gửi GET yêu cầu với Axios. Tất cả những gì còn lại là thực hiện GET yêu cầu trong ComponentDidMount() vòng đời và để nhập Axios:
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
componentDidMount() {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
this.setState({ posts: response.data });
})
.catch((error) => {
console.log(error);
});
}
render() {
const { posts } = this.state;
return (
);
}
}
Kết luận
Trong bài viết này, chúng tôi đã tìm hiểu cách thực hiện các yêu cầu GET HTTP với cả thành phần chức năng và lớp bằng cách sử dụng hai phương thức được sử dụng phổ biến nhất – API tìm nạp và Axios.
Sử dụng một phương pháp cụ thể là hoàn toàn tùy thuộc vào bạn.
