Axios là Máy khách HTTP dựa trên lời hứa dành cho nút. js và trình duyệt. Do đó, nó hoạt động tốt như nhau trong các ứng dụng JavaScript phía trước và máy chủ Node phía sau
Bài viết này hướng dẫn cách sử dụng Axios trong ứng dụng React đơn giản. React là một thư viện JavaScript để xây dựng giao diện người dùng, vì vậy chúng tôi sẽ sử dụng Axios tại đây cho giao diện người dùng dựa trên trình duyệt
điều kiện tiên quyết
Để làm theo, bạn sẽ cần những điều sau đây
- Nút. js phiên bản 16. 16. 0 được cài đặt trên máy tính của bạn
- Một dự án React mới được thiết lập với Tạo ứng dụng React
- IDE hoặc trình soạn thảo văn bản do bạn chọn, chẳng hạn như Sublime Text hoặc Visual Studio Code
chúng tôi sẽ bao gồm
Thiết lập dự án React của chúng tôi
Chúng tôi sẽ tạo dự án của chúng tôi theo bước được đề cập trong bước một ở trên. Hãy bắt đầu bằng cách chạy lệnh sau
npx create-react-app react-axios-tutorial
Bây giờ chúng ta sẽ điều hướng đến thư mục dự án bằng cách chạy
cd react-axios-tutorial
Tôi đã chọn đặt tên dự án là hướng dẫn phản ứng-Axios vì chúng tôi đang tìm hiểu cách Axios hoạt động trong React
Hiện tại, đây là cấu trúc dự án của tôi trông như thế nào
Cài đặt Axios vào ứng dụng React của chúng tôi
Để cài đặt Axios, chúng ta chạy lệnh sau
npm i axios
Điều quan trọng là phải xác minh các thành phần phụ thuộc trong tệp
npm i axios1 để xác nhận xem Axios đã được cài đặt hay chưa
Đây là trạng thái hiện tại của các phụ thuộc của tôi
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Gửi yêu cầu API CRUD với Axios
Trong phần này, chúng tôi sẽ thảo luận về cách chúng tôi có thể gửi các yêu cầu CRUD. Chúng tôi sẽ tạo, truy xuất, cập nhật và xóa dữ liệu bằng JSONPlaceholder có sẵn công khai
Cách thực hiện yêu cầu NHẬN
Bước đầu tiên là tạo một thư mục thành phần trong thư mục src của chúng tôi để thực hiện yêu cầu
npm i axios2. Chúng tôi điều hướng vào thư mục src và sau đó chạy mã bên dưới
mkdir Components
Trong thư mục này, chúng tôi tạo một tệp
npm i axios3 và thêm mã bên dưới
________số 8
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Điều đầu tiên chúng tôi làm là nhập các hook
npm i axios4,
npm i axios5 và
npm i axios6. Chúng tôi cũng nhập Axios để có thể thực hiện các yêu cầu HTTP. Trong các móc nối
npm i axios5, chúng tôi sử dụng phương pháp
npm i axios2 để gửi yêu cầu a
npm i axios2 tới điểm cuối của mình, sau đó sử dụng phương pháp
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
Chúng tôi đã nhận được một đối tượng như một phản hồi. Một mảng dữ liệu với địa chỉ thuộc tính, công ty, email, id, tên, điện thoại, tên người dùng và trang web được truy cập. Các thuộc tính sau đó được gán cho trạng thái của người dùng và được cung cấp trong thành phần
Ngoài ra còn có các chi tiết khác về yêu cầu, chẳng hạn như mã trạng thái bên dưới
1 hoặc các chi tiết khác bên trong//... "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "axios": "^0.27.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, //...2//... "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "axios": "^0.27.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, //...
Tiếp theo, chúng tôi thêm thành phần
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
npm i axios0
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bước tiếp theo là bắt đầu ứng dụng của chúng tôi với
npm i axios1
Chúng ta nên có một cái gì đó trông giống như hình dưới đây
Cách thực hiện yêu cầu POST
Sử dụng Axios với POST là bước tiếp theo. Chúng ta sẽ cần tạo một thành phần mới có tên là
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
npm i axios3
Đoạn mã sau được thêm vào
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
npm i axios5
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sử dụng chức năng
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
mkdir Components0 cung cấp cho chúng ta cùng một đối tượng phản hồi với thông tin mà chúng ta có thể sử dụng bên trong phương thức
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
Cần nắm bắt đầu vào
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
mkdir Components0. Tiếp theo, chúng tôi thêm đầu vào cùng với yêu cầu
mkdir Components0, yêu cầu này sẽ trả về phản hồi. Sau đó, chúng ta có thể
mkdir Components5 phản hồi, hiển thị đầu vào
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
Bây giờ, chúng tôi thêm thành phần vào
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
cd react-axios-tutorial0
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Làm thế nào để thực hiện một yêu cầu đặt
Sử dụng Axios với phương pháp
mkdir Components8 là bước tiếp theo. Chúng tôi sẽ cần tạo một thành phần mới có tên là
mkdir Components9 trong thư mục Thành phần của chúng tôi
cd react-axios-tutorial1
Đoạn mã sau được thêm vào
mkdir Components9 để tạo biểu mẫu cho phép người dùng nhập và sau đó cập nhật nội dung thành API
cd react-axios-tutorial2
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Trong đoạn mã trên, chúng tôi sử dụng phương pháp
mkdir Components8 từ Axios. Như với phương pháp
mkdir Components0, chúng tôi bao gồm các thuộc tính mà chúng tôi muốn thêm vào tài nguyên được cập nhật
Một lần nữa, sử dụng phương pháp
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
Tiếp theo, chúng tôi thêm thành phần
mkdir Components9 vào tệp
import React, { useEffect, useState } from "react";
import axios from "axios";
function Users[] {
const [post, setPost] = useState[[]];
useEffect[[] => {
axios.get["//jsonplaceholder.typicode.com/users"].then[[data] => {
console.log[data];
setPost[data?.data];
}];
}, []];
return [
Users
{post.map[[item, i] => {
return [
{item?.name}
];
}]}
];
}
export default Users;
cd react-axios-tutorial3
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Cách thực hiện yêu cầu xóa
Bằng cách sử dụng phương thức
import React, { useEffect, useState } from "react";
import axios from "axios";
function Users[] {
const [post, setPost] = useState[[]];
useEffect[[] => {
axios.get["//jsonplaceholder.typicode.com/users"].then[[data] => {
console.log[data];
setPost[data?.data];
}];
}, []];
return [
Users
{post.map[[item, i] => {
return [
{item?.name}
];
}]}
];
}
export default Users;
import React, { useEffect, useState } from "react";
import axios from "axios";
function Users[] {
const [post, setPost] = useState[[]];
useEffect[[] => {
axios.get["//jsonplaceholder.typicode.com/users"].then[[data] => {
console.log[data];
setPost[data?.data];
}];
}, []];
return [
Users
{post.map[[item, i] => {
return [
{item?.name}
];
}]}
];
}
export default Users;
import React, { useEffect, useState } from "react";
import axios from "axios";
function Users[] {
const [post, setPost] = useState[[]];
useEffect[[] => {
axios.get["//jsonplaceholder.typicode.com/users"].then[[data] => {
console.log[data];
setPost[data?.data];
}];
}, []];
return [
Users
{post.map[[item, i] => {
return [
{item?.name}
];
}]}
];
}
export default Users;
Để xóa người dùng, chúng tôi tạo
import React, { useEffect, useState } from "react";
import axios from "axios";
function Users[] {
const [post, setPost] = useState[[]];
useEffect[[] => {
axios.get["//jsonplaceholder.typicode.com/users"].then[[data] => {
console.log[data];
setPost[data?.data];
}];
}, []];
return [
Users
{post.map[[item, i] => {
return [
{item?.name}
];
}]}
];
}
export default Users;
cd react-axios-tutorial4
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Một lần nữa, đối tượng
npm i axios00 chứa thông tin về yêu cầu. Sau khi biểu mẫu được gửi, chúng tôi có thể
mkdir Components5 lại thông tin đó
Tệp
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
cd react-axios-tutorial5
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Xử lý lỗi
Axios có khả năng xử lý lỗi không?
Khi thực hiện yêu cầu, điều gì sẽ xảy ra nếu có lỗi?
Có thể có sự cố khi truyền dữ liệu, có thể yêu cầu sai điểm cuối hoặc có thể có sự cố mạng. Để mô phỏng lỗi, chúng tôi sẽ gửi yêu cầu đến một điểm cuối
import React, { useEffect, useState } from "react";
import axios from "axios";
function Users[] {
const [post, setPost] = useState[[]];
useEffect[[] => {
axios.get["//jsonplaceholder.typicode.com/users"].then[[data] => {
console.log[data];
setPost[data?.data];
}];
}, []];
return [
Users
{post.map[[item, i] => {
return [
{item?.name}
];
}]}
];
}
export default Users;
npm i axios04
Yêu cầu này sẽ trả về một
npm i axios05
Để xử lý lỗi, chúng tôi tạo
npm i axios06 và thêm đoạn mã sau
cd react-axios-tutorial6
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Do đó, Axios sẽ báo lỗi thay vì thực thi phương thức
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
Chúng tôi đang sử dụng chức năng này để cảnh báo người dùng về lỗi bằng cách lấy dữ liệu lỗi và đặt nó ở trạng thái. Do đó, nếu xảy ra lỗi, thông báo lỗi sẽ xuất hiện
Người dùng được cảnh báo về lỗi bằng cách đặt dữ liệu lỗi ở trạng thái. Một thông báo được hiển thị nếu có lỗi. Khi chạy mã này, chúng ta sẽ thấy. "Lỗi. Yêu cầu không thành công với mã trạng thái 404"
Tệp
//...
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
//...
cd react-axios-tutorial7
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Phiên bản cơ sở
Chúng ta sẽ thiết lập một phiên bản cơ sở với một URL và các thành phần cấu hình khác trong phần này
Bước đầu tiên là tạo một tệp riêng có tên
npm i axios09
Hãy để chúng tôi thêm mã này vào
npm i axios09 của chúng tôi
cd react-axios-tutorial8
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Chúng tôi sẽ sử dụng tệp
import React, { useEffect, useState } from "react";
import axios from "axios";
function Users[] {
const [post, setPost] = useState[[]];
useEffect[[] => {
axios.get["//jsonplaceholder.typicode.com/users"].then[[data] => {
console.log[data];
setPost[data?.data];
}];
}, []];
return [
Users
{post.map[[item, i] => {
return [
{item?.name}
];
}]}
];
}
export default Users;
import React, { useEffect, useState } from "react";
import axios from "axios";
function Users[] {
const [post, setPost] = useState[[]];
useEffect[[] => {
axios.get["//jsonplaceholder.typicode.com/users"].then[[data] => {
console.log[data];
setPost[data?.data];
}];
}, []];
return [
Users
{post.map[[item, i] => {
return [
{item?.name}
];
}]}
];
}
export default Users;
Chúng tôi nhập phiên bản mới như thế này
cd react-axios-tutorial9
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Không còn cần phải nhập toàn bộ URL mỗi lần chúng tôi muốn truy cập một điểm cuối
import React, { useEffect, useState } from "react";
import axios from "axios";
function Users[] {
const [post, setPost] = useState[[]];
useEffect[[] => {
axios.get["//jsonplaceholder.typicode.com/users"].then[[data] => {
console.log[data];
setPost[data?.data];
}];
}, []];
return [
Users
{post.map[[item, i] => {
return [
{item?.name}
];
}]}
];
}
export default Users;
npm i axios14 hiện là URL cơ sở
Việc sử dụng async và chờ đợi
Phần này cho biết cách chúng tôi có thể làm việc với
npm i axios15 bằng cách sử dụng
npm i axios16 và
npm i axios17
Các lời hứa được giải quyết bằng cách sử dụng từ khóa ________ 217, trả về ________ 219. Sau đó,
npm i axios19 có thể được gán cho một biến
npm i axios0
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Trong ví dụ trên, phương pháp
npm i axios31 được thay thế. Kết quả là,
npm i axios32 đã được thực hiện, dẫn đến việc
npm i axios19 được lưu trữ trong biến
npm i axios00
Phần kết luận
Hướng dẫn này trình bày cách Axios có thể được sử dụng bên trong ứng dụng React để tạo yêu cầu HTTP và xử lý phản hồi
Cảm ơn vì đã đọc 🌟🎉
Thật tuyệt khi thấy rằng bạn đã thích bài viết. Xin vui lòng, cho tôi biết những gì bạn nghĩ trong phần bình luận