ReactJS: Cách Sử Dụng Axios Với React | V1Study

Giới thiệu

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 $http trong Angular.js v1.x và tương tự như API Fetch trong JavaScript gốc.

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 async và await để có 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 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ự án

Trong phần này, bạn sẽ thêm Axios vào dự án v1study-tutorial mà bạn đã tạo sau hướng dẫn Cách thiết lập một dự án React với Create React App.

Để 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 GET

Trong ví dụ này, bạn tạo một component mới và import Axios vào đó để gửi requets GET.

Bên trong thư mục src bạn hãy tạo một component mới có tên PersonList.js, sau đó thêm vào mã sau:

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> ) } }

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 componentDidMount và thực hiện một request GET.

Bạn sử dụng axios.get(url) 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ị 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 res.status hoặc nhiều thông tin bên trong res.request.

Bước 3 - Tạo request 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 đoạn code trước đó trong PersonList và thêm mã sau để tạo biểu mẫu cho phép người dùng nhập và sau đó POSTđưa nội dung vào 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 form. Sau đó cập nhật state vào input user.

Việc sử dụng POST 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 then.

Để hoàn thành request POST, trước tiên bạn phải lấy được thông tin của input user. Sau đó, bạn thêm input cùng với request POST, điề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 sẽ hiển thị nội dung đã điền vào input user.

Bước 4 - Tạo request 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à truyền một URL làm tham số.

Thay đổi mã cho biểu mẫu từ ví POST để xóa người dùng thay vì thêm người 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> ) } }

Một lần nữa, đố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 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 Axios

Trong 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 api.js, sau đó export một phiên bản mới axios với các giá trị mặc định sau:

import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` });

Khi phiên bản mặc định được thiết lập, nó có thể được sử dụng bên trong component PersonList. Bạn import phiên bản mới như thế này:

import React from 'react'; import axios from 'axios'; import API from './api'; export default class PersonList extends React.Component { state = { id: '', } handleChange = event => { this.setState({ id: event.target.value }); } handleSubmit = event => { event.preventDefault(); API.delete(`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> ) } }

Vì http://jsonplaceholder.typicode.com/ 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à 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 promise.

Từ khóa await giải quyết các promise và trả về value. Sau đó value có thể được gán cho một biến.

import React from 'react'; import axios from 'axios'; import API from './api'; export default class PersonList extends React.Component { state = { id: '', } handleChange = event => { this.setState({ id: event.target.value }); } handleSubmit = async event => { event.preventDefault(); const res = await PI.delete(`users/${this.state.id}`) 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> ) } }

Trong đoạn code trên ta đã bỏ đi .then(). Giá trị promise được giải quyết và giá trị được lưu trữ bên trong biến res.

Phần kết luận

Trong 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.