Axios trong React là gì ✅ 2023

Copy

Mẹo về Axios trong React là gì Chi Tiết

Họ tên bố(mẹ) đang tìm kiếm từ khóa Axios trong React là gì được Update vào lúc : 2022-12-20 04:30:10 . Với phương châm chia sẻ Mẹo Hướng dẫn trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi đọc nội dung bài viết vẫn ko hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Mình lý giải và hướng dẫn lại nha.

Axios là Máy khách HTTP nhờ vào lời hứa hẹn dành riêng cho nút. js và trình duyệt. Do đó, nó hoạt động và sinh hoạt giải trí tốt như nhau trong những ứng dụng JavaScript phía trước và sever Node phía sau

Nội dung chính Show

điều kiện tiên quyếtThiết lập dự án công trình bất Động sản React của chúng tôiCài đặt Axios vào ứng dụng React của chúng tôiGửi yêu cầu API CRUD với AxiosCách thực hiện yêu cầu NHẬNCách thực hiện yêu cầu POSTLàm thế nào để thực hiện một yêu cầu đặtCách thực hiện yêu cầu xóaXử lý lỗiPhiên bản cơ sởViệc sử dụng async và chờ đợiPhần kết luậnSự khác lạ giữa axios và tìm nạp là gì?Axios có thiết yếu trong phản ứng không?Nói một cách đơn giản, Axios là gì?Axios là giao diện người tiêu dùng hay phụ trợ?

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 tiêu dùng, vì vậy chúng tôi sẽ sử dụng Axios tại đây cho giao diện người tiêu dùng nhờ vào trình duyệt

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

Để tuân theo, bạn sẽ có nhu yếu các điều sau đây

Nút. js phiên bản 16. 16. 0 được setup trên máy tính của bạnMột dự án công trình bất Động sản React mới được thiết lập với Tạo ứng dụng ReactIDE hoặc trình soạn thảo văn bản do bạn chọn, ví dụ như Sublime Text hoặc Visual Studio Code

chúng tôi sẽ gồm có

Thiết lập dự án công trình bất Động sản React của chúng tôi

Chúng tôi sẽ tạo dự án công trình bất Động sản của chúng tôi theo bước được đề cập trong bước một ở trên. Hãy khởi đầu bằng phương pháp chạy lệnh sau

npx create-react-app react-axios-tutorial

Bây giờ tất cả chúng ta sẽ điều hướng tới thư mục dự án công trình bất Động sản bằng phương pháp chạy

cd react-axios-tutorial

Tôi đã chọn đặt tên dự án công trình bất Động sản là phía dẫn phản ứng-Axios vì chúng tôi đang tìm hiểu cách Axios hoạt động và sinh hoạt giải trí trong React

Hiện tại, đây là cấu trúc dự án công trình bất Động sản của tôi trông ra làm sao

Cài đặt Axios vào ứng dụng React của chúng tôi

Để setup Axios, tất cả chúng ta chạy lệnh sau

npm i axios

Điều quan trọng là phải xác minh những thành phần phụ thuộc trong tệp

npm i axios 1 để xác nhận xem Axios đã được setup hay chưa

Đây là trạng thái hiện tại của những phụ thuộc của tôi

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

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 hoàn toàn có thể gửi những yêu cầu CRUD. Chúng tôi sẽ tạo, truy xuất, update và xóa tài liệu bằng JSONPlaceholder có sẵn công khai minh bạch

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 axios 2. Chúng tôi điều khuynh hướng về phía thư mục src và sau đó chạy mã bên dướimkdir Components

Trong thư mục này, chúng tôi tạo một tệp

npm i axios 3 và thêm mã phía dưới

________số 8

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

Điều đầu tiên chúng tôi làm là nhập những hook

npm i axios 4, npm i axios 5 và npm i axios 6. Chúng tôi cũng nhập Axios để hoàn toàn có thể thực hiện những yêu cầu HTTP. Trong những móc nối npm i axios 5, chúng tôi sử dụng phương pháp npm i axios 2 để gửi yêu cầu anpm i axios 2 tới điểm cuối của tớ, 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-sự kiện": "^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" , //... 0 để lấy lại tất cả tài liệu phản hồi mà chúng tôi sử dụng để update trạng thái của người tiêu dùng

Chúng tôi đã nhận được một đối tượng như một phản hồi. Một mảng tài 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 tiêu 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 tiêu dùng và được đáp ứng trong thành phần

Ngoài ra còn tồn tại những cụ ông cụ bà thể khác về yêu cầu, ví dụ như mã trạng thái phía dưới

Tiếp theo, chúng tôi thêm thành phần

npm i axios 0

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

Bước tiếp theo là khởi đầu ứng dụng của chúng tôi với

npm i axios 1

Chúng ta nên có một chiếc gì đó trông in 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 mang tên là

Đoạn mã sau được thêm vào

npm i axios 5

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

Sử dụng hiệu suất cao

//... "dependencies": "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-sự kiện": "^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" , //... 7, chúng tôi dừng hành vi mặc định của biểu mẫu. Sau đó, chúng tôi update //... "dependencies": "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-sự kiện": "^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" , //... 8 để phản ánh đầu vào //... "dependencies": "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-sự kiện": "^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" , //... 9. Phương thức mkdir Components 0 đáp ứng cho tất cả chúng ta cùng một đối tượng phản hồi với thông tin mà tất cả chúng ta hoàn toàn 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-sự kiện": "^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" , //... 0

Cần nắm khởi đầu vào

Bây giờ, chúng tôi thêm thành phần vào

cd react-axios-tutorial 0

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

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 Components 8 là bước tiếp theo. Chúng tôi sẽ cần tạo một thành phần mới mang tên là mkdir Components 9 trong thư mục Thành phần của chúng tôicd react-axios-tutorial 1

Đoạn mã sau được thêm vào

mkdir Components 9 để tạo biểu mẫu được cho phép người tiêu dùng nhập và sau đó update nội dung thành API

cd react-axios-tutorial 2

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

Trong đoạn mã trên, chúng tôi sử dụng phương pháp

mkdir Components 8 từ Axios. Như với phương pháp mkdir Components 0, chúng tôi gồm có những thuộc tính mà chúng tôi muốn thêm vào tài nguyên được update

Một lần nữa, sử dụng phương pháp

Tiếp theo, chúng tôi thêm thành phần

mkdir Components 9 vào tệp import React, useEffect, useState from "react"; import axios from "axios"; function Users() const [post, setPost] = useState([]); useEffect(() => axios.get("https://jsonplaceholder.typicode.com/users").then((data) => console.log(data); setPost(data?.data); ); , []); return (

Users post.map((item, i) => return (

item?.name

); )

); export default Users; 5 của chúng tôi

cd react-axios-tutorial 3

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

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("https://jsonplaceholder.typicode.com/users").then((data) => console.log(data); setPost(data?.data); ); , []); return (

Users post.map((item, i) => return (

item?.name

); )

); export default Users; 6 và chuyển một URL làm tham số, tất cả chúng ta sẽ xem cách xóa những mục khỏi import React, useEffect, useState from "react"; import axios from "axios"; function Users() const [post, setPost] = useState([]); useEffect(() => axios.get("https://jsonplaceholder.typicode.com/users").then((data) => console.log(data); setPost(data?.data); ); , []); return (

Users post.map((item, i) => return (

item?.name

); )

); export default Users; 7. Chúng tôi cần tạo một thành phần mới mang tên là import React, useEffect, useState from "react"; import axios from "axios"; function Users() const [post, setPost] = useState([]); useEffect(() => axios.get("https://jsonplaceholder.typicode.com/users").then((data) => console.log(data); setPost(data?.data); ); , []); return (

Users post.map((item, i) => return (

item?.name

); )

); export default Users; 8 trong dự án công trình bất Động sản React của chúng tôi

Để xóa người tiêu dùng, chúng tôi tạo

Users post.map((item, i) => return (

item?.name

); )

); export default Users; 8 và thêm đoạn mã sau

cd react-axios-tutorial 4

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

Một lần nữa, đối tượng

npm i axios 00 chứa thông tin về yêu cầu. Sau khi biểu mẫu được gửi, chúng tôi hoàn toàn có thể mkdir Components 5 lại thông tin đó

Tệp

cd react-axios-tutorial 5

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

Xử lý lỗi

Axios hoàn toàn có thể 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 tài liệu, hoàn toàn có thể yêu cầu sai điểm cuối hoặc hoàn toàn 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

Users post.map((item, i) => return (

item?.name

); )

); export default Users; 7 không tồn tại. npm i axios 04

Yêu cầu này sẽ trả về một

npm i axios 05

Để xử lý lỗi, chúng tôi tạo

npm i axios 06 và thêm đoạn mã sau

cd react-axios-tutorial 6

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

Do đó, Axios sẽ báo lỗi thay vì thực thi phương thức

Chúng tôi đang sử dụng hiệu suất cao này để chú ý người tiêu dùng về lỗi bằng phương pháp lấy tài 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 chú ý về lỗi bằng phương pháp đặt tài 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, tất cả 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

cd react-axios-tutorial 7

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

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à những thành phần thông số kỹ thuật khác trong phần này

Bước đầu tiên là tạo một tệp riêng mang tên

npm i axios 09

Hãy để chúng tôi thêm mã này vào

npm i axios 09 của chúng tôi

cd react-axios-tutorial 8

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

Chúng tôi sẽ sử dụng tệp

Users post.map((item, i) => return (

item?.name

); )

); export default Users; 7 trong thành phần import React, useEffect, useState from "react"; import axios from "axios"; function Users() const [post, setPost] = useState([]); useEffect(() => axios.get("https://jsonplaceholder.typicode.com/users").then((data) => console.log(data); setPost(data?.data); ); , []); return (

Users post.map((item, i) => return (

item?.name

); )

); export default Users; 8 của chúng tôi

Chúng tôi nhập phiên bản mới như vậy này

cd react-axios-tutorial 9

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

Không còn nê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

Users post.map((item, i) => return (

item?.name

); )

); export default Users; 7 khác vì npm i axios 14 hiện là URL cơ sở

Việc sử dụng async và chờ đón

Phần này cho biết thêm thêm phương pháp chúng tôi hoàn toàn có thể thao tác với

npm i axios 15 bằng phương pháp sử dụng npm i axios 16 và npm i axios 17

Các lời hứa hẹn được xử lý và xử lý bằng phương pháp sử dụng từ khóa ________ 217, trả về ________ 219. Sau đó,

npm i axios 19 hoàn toàn có thể được gán cho một biến

npm i axios 0

Vào chính sách toàn màn hình hiển thị Thoát chính sách toàn màn hình hiển thị

Trong ví dụ trên, phương pháp

npm i axios 31 được thay thế. Kết quả là, npm i axios 32 đã được thực hiện, dẫn đến việc npm i axios 19 được tàng trữ trong biến npm i axios 00

Phần kết luận

Hướng dẫn này trình bày cách Axios hoàn toàn 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 nội dung bài viết. Xin vui lòng, cho tôi biết những gì bạn nghĩ trong phần phản hồi

Sự khác lạ giữa axios và tìm nạp là gì?

Các thuộc tính rất khác nhau được sử dụng cho một yêu cầu gửi tài liệu đến điểm cuối - Axios sử dụng thuộc tính tài liệu, trong khi với tìm nạp, chúng tôi sử dụng thuộc tính body toàn thân. We need to serialize data into a JSON string to send data. Axios automatically stringifies data when sending JavaScript objects to the API using the POST method.

Axios có thiết yếu trong phản ứng không?

Nó được cho phép bạn tìm nạp tài liệu và thực hiện những yêu cầu HTTP. Đây là phương pháp phổ biến để tiếp xúc với cơ sở tài liệu trong React. Trong React, có một phương pháp khác để tiếp xúc với sever phụ trợ và yêu cầu setup thư viện phổ biến Axios .

Nói một cách đơn giản, Axios là gì?

Axios là thư viện HTTP nhờ vào lời hứa hẹn được cho phép nhà phát triển đưa ra yêu cầu tới sever của chính họ hoặc sever của bên thứ ba để tìm nạp tài liệu . Nó đáp ứng những phương pháp rất khác nhau để thực hiện những yêu cầu như GET, POST, PUT/PATCH và DELETE.

Axios là giao diện người tiêu dùng hay phụ trợ?

Axios được tương hỗ bởi tất cả những trình duyệt chính. Gói này hoàn toàn có thể được sử dụng cho sever phụ trợ của bạn, được tải qua CDN hoặc được yêu cầu trong ứng dụng giao diện người tiêu dùng của bạn . Tải thêm tài liệu liên quan đến nội dung bài viết Axios trong React là gì programming

Review Axios trong React là gì ?

Bạn vừa đọc nội dung bài viết Với Một số hướng dẫn một cách rõ ràng hơn về Clip Axios trong React là gì tiên tiến nhất

Share Link Tải Axios trong React là gì miễn phí

Bạn đang tìm một số trong những Share Link Cập nhật Axios trong React là gì Free.

Hỏi đáp thắc mắc về Axios trong React là gì

Nếu sau khi đọc nội dung bài viết Axios trong React là gì vẫn chưa hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Tác giả lý giải và hướng dẫn lại nha #Axios #trong #React #là #gì - 2022-12-20 04:30:10

Kế Toán.VN News - Tổng hợp tình huống kế toán

Table of Content

Axios trong React là gì ✅ 2023

Mẹo về Axios trong React là gì Chi Tiết

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

Thiết lập dự án công trình bất Động sản React của chúng tôi

Cài đặt Axios vào ứng dụng React của chúng tôi

Gửi yêu cầu API CRUD với Axios

Cách thực hiện yêu cầu NHẬN

Cách thực hiện yêu cầu POST

Làm thế nào để thực hiện một yêu cầu đặt

Cách thực hiện yêu cầu xóa

Xử lý lỗi

Phiên bản cơ sở

Việc sử dụng async và chờ đón

Phần kết luận

Sự khác lạ giữa axios và tìm nạp là gì?

Axios có thiết yếu trong phản ứng không?

Nói một cách đơn giản, Axios là gì?

Axios là giao diện người tiêu dùng hay phụ trợ?

Review Axios trong React là gì ?

Share Link Tải Axios trong React là gì miễn phí

Hỏi đáp thắc mắc về Axios trong React là gì

Post a Comment

kton-7na7896b.vn