Hướng dẫn dùng axios.put JavaScript
Nhiều dự án trên web cần giao diện với REST API ở một số giai đoạn trong quá trình phát triển của chúng. Axios là một ứng dụng khách HTTP nhẹ dựa trên service Show
Axios dựa trên promise, mang lại cho bạn khả năng tận dụng lợi thế của JavaScript Bạn cũng có thể chặn và hủy yêu cầu, đồng thời tích hợp sẵn tính năng bảo vệ phía máy khách để chống lại việc giả mạo yêu cầu trên nhiều trang web. Trong bài viết này, bạn sẽ thấy các ví dụ về cách sử dụng Axios để truy cập API Trình giữ chỗ JSON phổ biến trong ứng dụng React. Bước 1 - Thêm Axios vào Dự ánTrong phần này, bạn sẽ thêm Axios vào dự án Để thêm Axios vào dự án, hãy mở terminal ra và thay đổi các thư mục vào dự án của bạn, sau đó chạy lệnh sau để cài đặt Axios: Tiếp theo, bạn sẽ cần import Axios vào file mà bạn muốn sử dụng. Bước 2 - Tạo request import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
name: '',
}
handleChange = event => {
this.setState({ name: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
const user = {
name: this.state.name
};
axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
Trong ví dụ này, bạn tạo một component mới và import Axios vào đó để gửi requets 0.Bên trong thư mục 2 bạn hãy tạo một component mới có tên 3, sau đó thêm vào mã sau:
Trong đoạn code trên, đầu tiên bạn import và React và Axios để chúng đều có thể được sử dụng trong component. Sau đó, bạn móc vào hook vòng đời 4 và thực hiện một request 0.Bạn sử dụng 6 với một URL từ một enpoint API để nhận được một promise trả về một đối tượng phản hồi. Bên trong đối tượng phản hồi, có dữ liệu sau đó được gán giá trị 7.Bạn cũng có thể nhận được thông tin khác về yêu cầu, chẳng hạn như mã trạng thái 8 hoặc nhiều thông tin bên trong 9.Bước 3 - Tạo request import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
id: '',
}
handleChange = event => {
this.setState({ id: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
Trong bước này, bạn sẽ sử dụng Axios với một phương thức yêu cầu HTTP khác được gọi là 0.Xóa đoạn code trước đó trong 2 và thêm mã sau để tạo biểu mẫu cho phép người dùng nhập và sau đó 0đưa nội dung vào API:
Bên trong hàm 4, bạn ngăn chặn hành động mặc định của form. Sau đó cập nhật 5 vào input 6.Việc sử dụng 0 sẽ cung cấp cho bạn cùng một đối tượng phản hồi với thông tin mà bạn có thể sử dụng bên trong lời gọi 8.Để hoàn thành request 0, trước tiên bạn phải lấy được thông tin của input 6. Sau đó, bạn thêm input cùng với request 0, điều này sẽ cung cấp cho bạn phản hồi. Sau đó, bạn có thể 2 phản hồi, phản hồi sẽ hiển thị nội dung đã điền vào input 6.Bước 4 - Tạo request import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` });4Trong ví dụ này, bạn sẽ thấy cách xóa các mục khỏi API bằng cách sử dụng 5 và truyền một URL làm tham số.Thay đổi mã cho biểu mẫu từ ví 0 để xóa người dùng thay vì thêm người mới:
Một lần nữa, đối tượng 7 cung cấp cho bạn thông tin về yêu cầu. Sau đó bạn có thể 2 lại thông tin đó một lần nữa sau khi form được gửi.Bước 5 - Sử dụng phiên bản cơ sở trong AxiosTrong ví dụ này, bạn sẽ thấy cách bạn có thể thiết lập một phiên bản cơ sở, trong đó bạn có thể định nghĩa URL và bất kỳ phần tử cấu hình nào khác. Tạo một file riêng biệt có tên 9, sau đó export một phiên bản mới 0 với các giá trị mặc định sau:
Khi phiên bản mặc định được thiết lập, nó có thể được sử dụng bên trong component 2. Bạn import phiên bản mới như thế này:
Vì 2 bây giờ là URL cơ sở, bạn không cần phải nhập toàn bộ URL mỗi khi bạn muốn truy cập một endpoint khác trên API. Bước 6 - Sử dụng async và awaitTrong ví dụ này, bạn sẽ thấy cách bạn có thể sử dụng Từ khóa 8 và trả về 9. Sau đó 9 có thể được gán cho một biến.
Trong đoạn code trên ta đã bỏ đi 1. Giá trị 8 được giải quyết và giá trị được lưu trữ bên trong biến 7.Phần kết luậnTrong bài hướng dẫn này, bạn đã khám phá một số ví dụ về cách sử dụng Axios bên trong ứng dụng React để tạo các yêu cầu HTTP và xử lý các phản hồi. |