Hướng dẫn cơ bản về Rest Api trong ReactJs
TIL
770
White

xuanqh viết ngày 21/11/2020

Hướng dẫn cơ bản về Rest Api trong ReactJs - Demo online: jsondev.org

Hôm nay chúng ta tìm hiểu cách sử dụng axios để truy vấn json trong ReactIs. Trong bài viết này tôi cung cấp một số code mẫu cơ bản các bạn có bước tiếp cận ban đầu với axios.

Cài đặt axios:

Sử dụng command:
npm install --save axios
Các tham số cơ bản:

url: Đường dẫn truy cập dữ liệu json mà bạn muốn hướng tới.
headers: Khai báo nội dung trong request mà bạn muốn đưa vào truy vấn. Ví dụ như 'Content-type', 'Authorization', 'Accept'...
params: Các tham số truy vấn trên url.
data: Dữ liệu bạn muốn đưa vào truy vấn
method: Phương thức truyền dữ liệu truy vấn. Ví dụ POST, GET, PUT...

Bắt đầu xây dựng truy vấn với axios

Bước 1: Import thư viện sử dụng axios
import axios from 'axios';

Bước 2: Khai báo config
let url = http://jsondev.org/jsondemo;
let config = {
method: this.state.methodSelected,
url: url,
headers: headers,
params: params,
data: data
};

Bước 3: Tạo một đoạn code sử dụng axios truy vấn
axios(config)
.then(function (response) {
console.log("Send REST Api result: ");
let dataResponse = response.data;
if (dataResponse != null) {
this.setState({
codeResult: JSON.stringify(dataResponse),
})
console.log(JSON.stringify(dataResponse));
}
})
.catch(function (error) {
console.log("error request api");
console.log('NetworkStatus: ' + error.toString());
let statusText = '';
try {
statusText = error.response.statusText;
} catch (e) {
}
console.log(error.toString() + ".\n" + statusText);
});

Kết luận

Bài trên chỉ là những bước đầu cho ai mới tiếp cận tìm hiểu về Reactjs và axios. Cảm ơn các bạn đã đọc và chia sẻ.

Github:

https://github.com/xuanqh/jsoneditoronline.git

###Online demo:
http://jsondev.org/

xuanqh 21-11-2020

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

xuanqh

1 bài viết.
4 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
White
0 5
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết hơn 2 năm trước
0 5
White
4 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết gần 2 năm trước
4 0
White
24 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết 4 năm trước
24 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
4 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!