Tôi có thể sử dụng Axios trong HTML không?
|
Axios js là thư viện HTTP dựa trên lời hứa cho phép bạn sử dụng dịch vụ API. Nó cung cấp các cách khác nhau để thực hiện các yêu cầu HTTP như GET, POST, PUT và DELETE. Axios có thể được sử dụng trong bất kỳ khung JavaScript nào và sau khi được cài đặt, nó cho phép ứng dụng của bạn tương tác với dịch vụ API. Show
Trong bài viết này, bạn sẽ tìm hiểu về gói Axios npm và cách nó được sử dụng để tạo các yêu cầu HTTP với NodeJS. Bạn đang tìm kiếm tài liệu khóa học tốt nhất để học Node. js từ đầu? . js trực tuyến và nhận hướng dẫn từ các chuyên gia và chuyên gia trong ngành. Axios là gì?Tương tác với các API REST và thực hiện các thao tác CRUD trở nên đơn giản với Axios. Các thư viện JavaScript như Vue, React và Angular có thể sử dụng Axios. Ngay cả JavaScript cũng có thể hoạt động liền mạch với Axios. Tại sao nên sử dụng Gói Axios NPM?Sau đây là một số lý do tại sao bạn nên sử dụng Axios cho tất cả các yêu cầu API của mình.
Các tính năng của AxiosĐây là một số lợi ích của việc sử dụng Axios.
Hỗ trợ trình duyệtMặc dù không phải tất cả các trình duyệt đều hỗ trợ Axios, nhưng những trình duyệt quan trọng thì hỗ trợ và chúng bao gồm.
Axios API cơ bảnĐoạn trích từ tài liệu Axios cho thấy rằng bạn có thể thực hiện các thao tác lấy, đăng, đặt, vá và xóa với Axios bằng cấu trúc API đơn giản, chẳng hạn như. const axios = require('axios');
async function makeRequest() {
const config = {
method: 'get',
url: 'http://webcode.me'
}
let res = await axios(config)
console.log(res.status);
}
makeRequest(); Trong đoạn mã trên, chúng tôi đã gửi một yêu cầu HTTP tới http. // mã web. tôi bằng cách thiết lập các tùy chọn cấu hình trước khi gửi yêu cầu phản hồi với đầu ra 200. Bạn có muốn học phát triển web? . Axios Mã trạng tháiMã trạng thái HTTP cho biết nếu một yêu cầu nhất định thành công. Các câu trả lời được chia thành năm loại.
Thông tin cơ bản về gói Axios NPMDưới đây được đề cập là thông tin cơ bản bạn phải biết về Axios.
Cách cài đặt Axios bằng npm Gói [Từng bước]Có thể sử dụng Axios trong cả trình duyệt và trong môi trường NodeJs. Điều này có nghĩa là nó có thể được cài đặt bằng cách sử dụng `npm` và trong Vanilla JavaScript bằng cách sử dụng tập lệnh Axios được cung cấp trên CDN. Hãy khám phá chi tiết cách cài đặt Axios trong dự án của bạn. Sử dụng npm Thư viện npm có quyền truy cập vào Axios, dễ cài đặt trong dự án bằng cách thực hiện npm install axios trong thiết bị đầu cuối của trình chỉnh sửa mã của bạn. Hoặc sử dụng sợi $ yarn add axios Or jsDelivr CDN Sử dụng cái này trong tệp HTML của bạn Sử dụng unpkg CDN Hoặc trình duyệt $ bower install axios Bước 1. Yêu cầu đăng AxiosCó thể sử dụng Axios để 'đăng' dữ liệu lên điểm cuối thông qua yêu cầu POST. Điểm cuối này sau đó có thể sử dụng yêu cầu POST này để thực hiện một hành động nhất định hoặc bắt đầu một sự kiện. Yêu cầu Axios Post được tạo bằng phương thức post. Tự động, Axios tuần tự hóa Đối tượng JavaScript thành JSON khi được chuyển đến phương thức đăng dưới dạng tham số thứ hai; . Đảm bảo rằng bạn chạy các ví dụ sau trong một tệp có tên là chỉ mục. js mà bạn có thể tự tạo và thực thi trên terminal theo hướng dẫn. const axios = require('axios');
async function doPostRequest() {
let payload = { name: 'John Doe', occupation: 'gardener' };
let res = await axios.post('http://httpbin.org/post', payload);
let data = res.data;
console.log(data);
}
doPostRequest(); Đoạn mã trên khi chạy trên thiết bị đầu cuối với $node index. js tạo ra kết quả bên dưới. Bước 2. Axios Nhận yêu cầuPhương thức GET dùng để truy xuất dữ liệu từ dịch vụ HTTP. Trong hầu hết các trường hợp, nó chỉ yêu cầu URL của điểm cuối mà bạn muốn truy xuất dữ liệu từ đó. Có một ngoại lệ nếu cổng API yêu cầu mã thông báo. Xem ví dụ bên dưới. const axios = require('axios');
axios.get('http://webcode.me').then(resp => console.log(resp.data)); Chạy đoạn mã trên trên thiết bị đầu cuối phản hồi với đầu ra sau. Các phương thức cho các yêu cầu HTTP của AxiosNgoài ra, Axios cung cấp một số phương thức yêu cầu khác được liệt kê bên dưới. axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) Trong khi bạn vẫn có thể, Tìm hiểu Node đúng cách tại KnowledgeHut. Bước 3. Xử lý yêu cầu phản hồi và đồng thờiXử lý yêu cầu phản hồi và đồng thời đề cập đến số lượng yêu cầu mà hệ thống có thể xử lý đồng thời. Các yêu cầu đồng thời trên một trang web nói về các yêu cầu nhận được từ nhiều người dùng cùng một lúc. Để chạy nhiều yêu cầu HTTP cùng lúc, tất cả những gì bạn làm là gửi một mảng URL tới axios. phương thức tất cả (). Khi các yêu cầu đã được gửi, bạn sẽ nhận được một mảng chứa đối tượng phản hồi theo thứ tự chúng được gửi. ________số 8_______Xem đầu ra bên dưới. Ngoài ra, bạn có thể trải rộng mảng trên nhiều đối số bằng axios. spread() dẫn đến kết quả đầu ra giống như ở trên. const axios = require('axios');
axios.all([
axios.get('https://reqres.in/api/users/1'),
axios.get('https://reqres.in/api/users/2')
])
.then(axios.spread((res1, res2) => {
console.log(res1.data);
console.log(res2.data);
})); Bước 4. Xử lý lỗiNếu xảy ra lỗi khi gửi yêu cầu HTTP bằng Axios, đối tượng lỗi kết quả có thông tin toàn diện cho phép chúng tôi xác định vị trí chính xác của lỗi. Có ba chỗ trong hướng dẫn này có thể xảy ra lỗi, như đã thấy trong ví dụ bên dưới. Vì Axios là một thư viện dựa trên lời hứa, nên việc khắc phục lỗi rất đơn giản. Nếu có bất kỳ vấn đề nào phát sinh trong khi xử lý yêu cầu, có thể sử dụng hàm catch() của lời hứa để xử lý chúng. $ yarn add axios Or jsDelivr CDN0 Xem ảnh chụp lỗi bên dưới Hãy xem Chương trình đào tạo dành cho nhà phát triển Full-stack nếu bạn muốn trở thành nhà phát triển full-stack. Bước 5. ĐĂNG JSON Sử dụng AxiosKhi đối tượng Javascript là tham số thứ 2 cho axios. post(), Axios sẽ tự động tuần tự hóa đối tượng thành JSON cho bạn. Ngoài ra, Axios sẽ thay đổi tiêu đề Content-Type thành application/JSON để các khung web như Express có thể tự động diễn giải nó. Đảm bảo tiêu đề Loại nội dung được chỉ định nếu bạn muốn sử dụng axios. post() để phân phối chuỗi JSON được tuần tự hóa trước dưới dạng JSON. $ yarn add axios Or jsDelivr CDN1 Đoạn mã trên có nghĩa là thông thường bạn không phải lo lắng về việc tuần tự hóa nội dung POST thành JSON, Axios sẽ xử lý việc đó cho bạn. Xem đầu ra bên dưới. Bước 6. Chuyển đổi yêu cầu và phản hồiChuyển đổi Yêu cầu và Phản hồi được sử dụng để gửi và nhận dữ liệu từ máy chủ. Khi bạn gửi một yêu cầu đến máy chủ, nó sẽ trả về một phản hồi, các đối tượng phản hồi của Axios là.
Bước 7. Nhiều yêu cầu với AxiosCó thể sử dụng Axios để tạo nhiều yêu cầu chỉ trong tích tắc. Và vì Axios trả về một Lời hứa, chúng ta có thể thực hiện nhiều yêu cầu bằng cách sử dụng Lời hứa. May mắn thay, Axios có chức năng có tên là tất cả; . $ yarn add axios Or jsDelivr CDN2 Các mã trên tạo ra kết quả sau. Bước 8. Máy chủ JSON với AxiosMáy chủ JSON là một gói npm cho phép bạn phát triển các API REST giả một cách nhanh chóng và dễ dàng. Nó được sử dụng để cung cấp cơ sở dữ liệu JSON dễ sử dụng có thể được sử dụng để trả lời các truy vấn HTTP. Ứng dụng khách HTTP mà chúng tôi sẽ sử dụng để gửi các truy vấn HTTP đến máy chủ JSON được gọi là Axios. $ yarn add axios Or jsDelivr CDN3 Đoạn mã trên cài đặt máy chủ. Bây giờ hãy tạo một dữ liệu JSON thử nghiệm có tên là người dùng. json và dán mã bên dưới. $ yarn add axios Or jsDelivr CDN4 Bây giờ hãy khởi động máy chủ với json-server --watch users. json. Lệnh --watch được sử dụng để chỉ định dữ liệu cho máy chủ. Khi máy chủ JSON đang bật, việc chạy mã bên dưới sẽ tạo ra kết quả như sau. $ yarn add axios Or jsDelivr CDN5 Nhấp vào đây để xem tài liệu đầy đủ. Cách Xóa Gói AxiosGỡ cài đặt Axios cũng dễ như cài đặt nó. Sử dụng các tùy chọn lệnh sau để xóa Axios khỏi dự án của bạn.
Axios ProxyMột proxy hoạt động như một trung gian giữa máy khách yêu cầu tài nguyên và máy chủ đáp ứng yêu cầu đó. Để thực hiện một yêu cầu proxy hợp lệ bằng Axios, chúng tôi sẽ kết hợp yêu cầu đó với Tác nhân ủy quyền HTTP bằng cách chạy npm install https-proxy-agent trên thiết bị đầu cuối của bạn. Tiếp theo, dán mã bên dưới vào chỉ mục của bạn. js và thực thi trên thiết bị đầu cuối bằng chỉ mục nút. js $ yarn add axios Or jsDelivr CDN6 Các mã trên tạo ra kết quả bên dưới. Cách tạo móc useAxios tùy chỉnhKhi thành phần được gắn kết, bạn có thể viết hook tùy chỉnh của mình bằng Axios để thực thi hoạt động tương tự như một chức năng có thể tái sử dụng thay vì sử dụng useEffect để lấy dữ liệu. Mặc dù bạn có thể tự tạo hook tùy chỉnh này, nhưng có một thư viện tuyệt vời có tên là use-Axios-client cung cấp cho bạn hook useAxios tùy chỉnh. Trước tiên, hãy cài đặt gói Axios trong dự án phản ứng. $ yarn add axios Or jsDelivr CDN7 $ yarn add axios Or jsDelivr CDN8 Móc trả về một đối tượng với tất cả các biến bạn cần để xử lý các trạng thái khác nhau. tải, lỗi và dữ liệu đã giải quyết. Bạn có thể sử dụng useAxios ở đầu thành phần ứng dụng và nhập URL mà bạn muốn đưa ra yêu cầu. Tải từ sẽ đúng trong khi yêu cầu này đang được xử lý. Hiển thị trạng thái lỗi là rất quan trọng nếu có. Trong mọi trường hợp, bạn có thể hiển thị dữ liệu được trả về trong giao diện người dùng nếu bạn có. Loại móc tùy chỉnh này có ưu điểm là giảm đáng kể số lượng mã và làm cho tổng thể đơn giản hơn. Hãy thử sử dụng móc useAxios độc đáo như móc này nếu bạn muốn tìm nạp dữ liệu với Axios dễ dàng hơn nữa. Phần kết luậnCuối cùng, việc tiêu tốn tài nguyên API và giao tiếp giữa các dịch vụ web là không thể tránh khỏi. Cần có thư viện HTTP hợp lý để thực hiện các yêu cầu HTTP để tiêu thụ tài nguyên từ các trang web khác. Axios là một thư viện HTTP tuyệt vời cho phép bạn giải quyết các vấn đề về giao tiếp dữ liệu trên trang web của mình. Nó dựa trên lời hứa, được sử dụng rộng rãi trong JavaScript và có cú pháp đơn giản. Hơn nữa, cho dù bạn đang làm việc ở giao diện người dùng hay giao diện người dùng sau, thì Axios đều cực kỳ hữu ích. Axios có thể tích hợp với NodeJs và các khung giao diện người dùng JavaScript như React, Vue và Angular. Khi nói đến việc sử dụng các dịch vụ API, Axios là giải pháp thực sự. Nếu bạn thích khám phá Node. js chuyên sâu, chúng tôi khuyến khích bạn đăng ký để học Node. js tại KnowledgeHut và nâng cao kỹ năng cho bản thân. Câu hỏi thường gặp (FAQ)1. Làm cách nào tôi có thể thực hiện yêu cầu HTTP với Axios?Gọi axios. post để thực hiện yêu cầu HTTP POST trong Axios(). Axios yêu cầu hai tham số để thực hiện yêu cầu POST. URI của điểm cuối dịch vụ và một đối tượng chứa các thuộc tính bạn muốn gửi đến máy chủ. 2. Tôi làm cách nào để lấy dữ liệu từ phản hồi của Axios?Axios có thể "lấy" dữ liệu từ API máy chủ bằng yêu cầu GET. Yêu cầu nhận HTTP được thực hiện với axios. phương thức nhận (). 3. Làm cách nào để tạo phiên bản Axios?trục. tạo là một nhà máy để tạo các phiên bản Axios mới. trục. ví dụ: tạo có thể dễ dàng tạo hai phiên bản Axios (một để gọi dịch vụ A và phiên bản kia để gọi dịch vụ B), trong đó A có thể hoạt động với thời gian chờ là 100 mili giây và B yêu cầu thời gian chờ là 500 mili giây. 4. Axios trả về dữ liệu như thế nào?Đối tượng phản hồi Axios được tạo thành từ các phần tử sau. Tải trọng được trả về từ máy chủ được gọi là dữ liệu. Mã HTTP do máy chủ cung cấp được gọi là trạng thái. Thông báo trạng thái HTTP do máy chủ trả về được gọi là statusText. 5. Axios là gì và tại sao tôi nên sử dụng nó?Axios là một thư viện Javascript triển khai API Promise, có nguồn gốc từ JS ES6 và được sử dụng để thực hiện các yêu cầu HTTP từ nút. js hoặc XMLHttpRequests từ trình duyệt. Axios HTML là gì?Axios là thư viện HTTP dựa trên lời hứa cho phép các nhà phát triển đưa ra yêu cầu tới máy chủ của chính họ hoặc của bên thứ ba để tìm nạp dữ liệu . Nó cung cấp các cách khác nhau để thực hiện các yêu cầu như GET, POST, PUT/PATCH và DELETE.
Tôi có thể sử dụng Axios ở giao diện người dùng không?Axios được hỗ trợ bởi tất cả các trình duyệt chính. Gói có thể được sử dụng cho máy chủ 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 dùng của bạn .
Tôi có thể sử dụng Axios trong trình duyệt không?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. Nó là đẳng cấu (= nó có thể chạy trong trình duyệt và nodejs với cùng một cơ sở mã ). Ở phía máy chủ, nó sử dụng nút gốc. js http, trong khi trên máy khách (trình duyệt), nó sử dụng XMLHttpRequests.
Chúng tôi có thể sử dụng Axios trong JavaScript không?Axios. Axios là một thư viện Javascript được sử dụng để thực hiện các yêu cầu HTTP từ nút. js hoặc XMLHttpRequests từ trình duyệt và nó hỗ trợ API Promise có nguồn gốc từ JS ES6. |
