Đầu tiên hãy xem kết quả của ví dụ này như sau để dễ hình dung hơn.
Cho 1 đoạn HTML với nội dung sau:
<div class="form-group col-sm-6 mb-4">
<label>Select Project</label>
<select class="form-control" id="projectSelect" name="provided_project">
</select>
</div>Và nội dung Javascript.
async function loadProjectInfo() {
return new Promise(function(resolve, reject) {
var projectUrl = `http://flask-backend.hoanghd.com/get_all_projects_from_db`;
projectSelect.addEventListener("ListenEventProject", async function () {
var response = await fetch(projectUrl);
var data = await response.json();
var result = await loadUserInfo();
var projectID = result.projectID;
while (projectSelect.firstChild) {
projectSelect.removeChild(projectSelect.firstChild);
}
data.forEach(function (project) {
var option = document.createElement("option");
option.value = project.id;
option.text = project.description;
if (projectID === project.id) {
option.selected = true;
resolve(project.id);
}
projectSelect.appendChild(option);
});
});
var event = new Event("ListenEventProject");
projectSelect.dispatchEvent(event);
});
}Giải thích cách mà nó hoạt động.
Đoạn code này gòm một hàm có tên là loadProjectInfo, và nó có mục tiêu là tải danh sách các dự án từ máy chủ và cập nhật thẻ <select> có id là “projectSelect”. Dưới đây là mô tả chi tiết về cách hàm này hoạt động:
Tạo một Promise:
return new Promise(function(resolve, reject) {
// ...
});Hàm loadProjectInfo trả về một Promise, cho phép sử dụng cú pháp async/await khi gọi nó.
Xác định URL cho yêu cầu Fetch:
var projectUrl = `http://flask-backend.hoanghd.com/get_all_projects_from_db`;URL cho yêu cầu Fetch được xác định.
Gắn sự kiện lắng nghe “ListenEventProject” cho thẻ projectSelect:
projectSelect.addEventListener("ListenEventProject", async function () {
// ...
});Một sự kiện lắng nghe được thêm vào thẻ projectSelect. Khi sự kiện này được kích hoạt, các bước trong hàm xử lý sự kiện sẽ được thực hiện.
Gửi yêu cầu Fetch để lấy danh sách dự án:
var response = await fetch(projectUrl);
var data = await response.json();Yêu cầu Fetch được gửi đến máy chủ để lấy danh sách dự án, và sau đó dữ liệu được chuyển đổi từ định dạng JSON.
Lấy thông tin người dùng một lần nữa:
var result = await loadUserInfo();
var projectID = result.projectID;Thông tin người dùng được tải lại một lần nữa, và projectID được lấy từ kết quả mới.
Xóa các lựa chọn cũ trong thẻ <select>:
while (projectSelect.firstChild) {
projectSelect.removeChild(projectSelect.firstChild);
}Tất cả các lựa chọn hiện có trong thẻ projectSelect được xóa đi để chuẩn bị cho việc cập nhật mới.
Thêm các lựa chọn mới từ dữ liệu đã nhận được:
data.forEach(function (project) {
var option = document.createElement("option");
option.value = project.id;
option.text = project.description;
if (projectID === project.id) {
option.selected = true;
resolve(project.id);
}
projectSelect.appendChild(option);
});Mỗi phần tử trong mảng data (danh sách dự án) được tạo thành một phần tử <option> mới và được thêm vào thẻ projectSelect. Nếu projectID của người dùng trùng với project.id, thì lựa chọn đó được đặt là được chọn. Hàm resolve(project.id) được gọi để giải quyết Promise với giá trị là project.id, có thể được sử dụng khi gọi hàm loadProjectInfo bằng cách sử dụng await.
Tạo và kích hoạt sự kiện “ListenEventProject”:
var event = new Event("ListenEventProject");
projectSelect.dispatchEvent(event);Một sự kiện mới với tên là “ListenEventProject” được tạo ra và sau đó được kích hoạt thông qua dispatchEvent. Điều này gây ra việc thực thi sự kiện lắng nghe đã được gắn trước đó, bắt đầu quá trình lấy và cập nhật dữ liệu.
Lưu ý: Như trước đó, đảm bảo rằng projectSelect đã được định nghĩa trước đó trong HTML và có sẵn khi hàm loadProjectInfo được gọi.
