Cách sử dụng Axios với React
Nhiều dự án trên web cần giao diện với API REST ở 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 client HTTP nhẹ dựa trên dịch vụ$http trong Angular.js v1.x và tương tự như API Tìm nạp JavaScript root . Axios là lời hứa có trụ sở, mang đến cho bạn khả năng để tận dụng JavaScript của async và await cho mã không đồng bộ dễ đọc hơn.
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 client để 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.
Yêu cầu
Để làm theo bài viết này, bạn cần những thứ sau:
- Node.js version 10.16.0 được cài đặt trên máy tính của bạn. Để cài đặt phần mềm này trên macOS hoặc Ubuntu 18.04, hãy làm theo các bước trong Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ trên macOS hoặc phần Cài đặt Sử dụng PPA của Cách Cài đặt Node.js trên Ubuntu 18.04 .
- Một dự án React mới được cài đặt với Tạo Ứng dụng React theo hướng dẫn Cách cài đặt Dự án React với Tạo Ứng dụng React .
- Nó cũng sẽ giúp bạn hiểu cơ bản về JavaScript mà bạn có thể tìm thấy trong loạt bài Cách viết mã trong JavaScript , cùng với kiến thức cơ bản về HTML và CSS.
Bước 1 - Thêm Axios vào Dự án
Trong phần này, bạn sẽ thêm Axios vào dự án React digital-ocean-tutorial mà bạn đã tạo sau digital-ocean-tutorial Cách cài đặt một dự án React với Tạo ứng dụng React .
Để thêm Axios vào dự án, hãy mở terminal của bạn và thay đổi các folder vào dự án của bạn:
- cd digital-ocean-tutorial
Sau đó chạy lệnh này để cài đặt Axios:
- npm install axios
Tiếp theo, bạn cần nhập Axios vào file bạn muốn sử dụng nó.
Bước 2 - Đưa ra yêu cầu GET
Trong ví dụ này, bạn tạo một thành phần mới và nhập Axios vào đó để gửi yêu cầu GET .
Bên trong folder src của dự án React của bạn, tạo một thành phần mới có tên là PersonList.js :
- nano src/PersonList.js
Thêm mã sau vào thành phần:
import React from 'react'; import axios from 'axios'; export default class PersonList extends React.Component { state = { persons: [] } componentDidMount() { axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { const persons = res.data; this.setState({ persons }); }) } render() { return ( <ul> { this.state.persons.map(person => <li>{person.name}</li>)} </ul> ) } } Đầu tiên, bạn nhập React và Axios để cả hai được dùng trong thành phần. Sau đó, bạn móc vào móc vòng đời componentDidMount và thực hiện yêu cầu GET .
Bạn sử dụng axios.get(url) với URL từ một điểm cuối API để nhận một lời hứa 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ị của person .
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 trong res.status hoặc thông tin khác bên trong res.request .
Bước 3 - Đưa ra Yêu cầu POST
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à POST .
Xóa mã trước đó trong PersonList và thêm mã sau để tạo biểu mẫu cho phép user nhập và sau đó POST nội dung lên API:
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 ( <div> <form onSubmit={this.handleSubmit}> <label> Person Name: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Add</button> </form> </div> ) } } Bên trong hàm handleSubmit , bạn ngăn chặn hành động mặc định của biểu mẫu. Sau đó cập nhật state cho đầu vào của user .
Sử dụng POST 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 cuộc gọi then .
Để hoàn thành yêu cầu POST , trước tiên bạn nắm bắt thông tin đầu vào của user . Sau đó, bạn thêm đầu vào cùng với yêu cầu POST , yêu cầu này sẽ cung cấp cho bạn phản hồi. Sau đó, bạn có thể console.log phản hồi, phản hồi này sẽ hiển thị đầu vào của user trong biểu mẫu.
Bước 4 - Đưa ra Yêu cầu DELETE
Trong 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 axios.delete và chuyển một URL làm tham số.
Thay đổi mã cho biểu mẫu từ ví dụ POST để xóa user thay vì thêm user mới:
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 ( <div> <form onSubmit={this.handleSubmit}> <label> Person ID: <input type="text" name="id" onChange={this.handleChange} /> </label> <button type="submit">Delete</button> </form> </div> ) } } , đối tượng res cung cấp cho bạn thông tin về yêu cầu. Sau đó, bạn có thể console.log thông tin đó sau khi biểu mẫu được gửi.
Bước 5 - Sử dụng Phiên bản cơ sở trong Axios
Trong ví dụ này, bạn sẽ thấy cách bạn có thể cài đặt một phiên bản cơ sở trong đó bạn có thể xác định URL và bất kỳ phần tử cấu hình nào khác.
Tạo một file riêng có tên api.js :
- nano src/api.js
Xuất một version axios mới với các giá trị mặc định sau:
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); Sau khi version mặc định được cài đặt , nó được dùng bên trong thành phần PersonList . Bạn nhập version mới như sau:
import React from 'react'; import axios from 'axios'; import API from '../api'; export default class PersonList extends React.Component { handleSubmit = event => { event.preventDefault(); API.delete(`users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } } Vì http://jsonplaceholder.typicode.com/ hiện là URL cơ sở, bạn không còn cần phải nhập toàn bộ URL mỗi khi bạn muốn truy cập một điểm cuối khác trên API.
Bước 6 - Sử dụng async và await
Trong ví dụ này, bạn sẽ thấy cách bạn có thể sử dụng async và await làm việc với các hứa hẹn.
Từ khóa await giải quyết promise và trả về value . value sau đó có thể được gán cho một biến.
handleSubmit = async event => { event.preventDefault(); // const response = await API.delete(`users/${this.state.id}`); console.log(response); console.log(response.data); }; Trong mẫu mã này, .then() được thay thế. promise được giải quyết và giá trị được lưu trữ bên trong biến response .
Kết luận
Trong 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.
Nếu bạn muốn tìm hiểu thêm về React, hãy xem loạt bài Cách viết mã trong React.js hoặc xem trang chủ đề React để biết thêm các bài tập và dự án lập trình.
Các tin liên quan
