Đầu tiên, bất chấp mọi biện pháp phòng ngừa, tôi bị nhiễm vi-rút corona [COVID-19] vào nửa cuối tháng 6 năm 2020. Trong hai tuần, nó hoàn toàn là địa ngục. Sức khỏe rất tệ, tôi chỉ biết nằm trên giường và mong rằng nó sẽ sớm qua đi. Sau đó là phục hồi trong 2-3 tuần tiếp theo. Bây giờ tôi cuối cùng đã trở lại cuộc sống bình thường và thậm chí còn tiếp tục tập luyện thể dục. Vì vậy, coronavirus không phải là trò đùa. Làm ơn, giữ an toàn
Thứ hai, hiện tại có rất nhiều điều đang xảy ra ở quê hương tôi - Belarus. Người Belarus đang chiến đấu chống lại chế độ độc tài. Tổng thống [cũ] của chúng ta đã thua trong cuộc bầu cử gần đây nhất được tổ chức vào ngày 9 tháng 8 năm 2020, nhưng ông ấy vẫn tiếp tục nắm quyền bằng cách sử dụng lực lượng cảnh sát và quân đội tàn bạo chống lại những người dân ôn hòa và đe dọa bất kỳ ai không đồng ý với ông ấy. Nhưng chúng tôi tiếp tục chiến đấu và phản đối mỗi ngày. Tôi rất coi trọng tất cả những sự kiện này và hy vọng một ngày nào đó sẽ thức dậy ở một Belarus tự do, dân chủ và thịnh vượng
bây giờ quay trở lại với chủ đề
Lời hứa trong Javascript là gì
Promise là một đối tượng đại diện cho sự hoàn thành hoặc thất bại cuối cùng của một hoạt động không đồng bộ
Một Promise có thể ở một trong các trạng thái sau
- chưa giải quyết
- hoàn thành
- phế phẩm
Một trong những ví dụ được sử dụng rộng rãi nhất về hoạt động không đồng bộ trong Javascript là API tìm nạp. Phương thức fetch[] trả về một Lời hứa
Giả sử rằng chúng tôi tìm nạp một số dữ liệu từ API phụ trợ. Đối với bài đăng trên blog này, tôi sẽ sử dụng JSONPlaceholder - API REST giả mạo. Chúng tôi sẽ tìm nạp dữ liệu của người dùng với id = 1
fetch["//jsonplaceholder.typicode.com/users/1"]
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Hãy xem cách chúng tôi có thể truy cập dữ liệu được trả về
1 -. sau đó [] xâu chuỗi
Đó là cách đơn giản nhất và rõ ràng nhất
fetch["//jsonplaceholder.typicode.com/users/1"] //1
.then[[response] => response.json[]] //2
.then[[user] => {
console.log[user.address]; //3
}];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Ở đây chúng tôi [1] tìm nạp dữ liệu từ API, [2] chuyển đổi nó thành đối tượng JSON và sau đó [3] in giá trị địa chỉ của người dùng vào bảng điều khiển
Kết quả là
{
street: 'Kulas Light',
suite: 'Apt. 556',
city: 'Gwenborough',
zipcode: '92998-3874',
geo: { lat: '-37.3159', lng: '81.1496' }
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
2 - Sử dụng giá trị được trả về sau trong mã
Nhưng nếu chúng ta muốn sử dụng giá trị được trả về ở đâu đó sau này trong mã thì sao?
Nếu chúng ta cố gắng làm như thế này [sai cách. ]
const address = fetch["//jsonplaceholder.typicode.com/users/1"]
.then[[response] => response.json[]]
.then[[user] => {
return user.address;
}];
console.log[address];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
chúng tôi sẽ nhận được
Promise { }
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nó xảy ra vì mã Javascript luôn thực thi đồng bộ, vì vậy bảng điều khiển. hàm log[] bắt đầu ngay sau yêu cầu tìm nạp[], không đợi cho đến khi nó được giải quyết. Trong thời điểm khi giao diện điều khiển. log[] bắt đầu chạy, một Lời hứa sẽ được trả về từ yêu cầu tìm nạp[] đang ở trạng thái chờ xử lý
Điều đó nói rằng chúng ta có thể truy cập giá trị được trả về của một đối tượng Promise trong một đối tượng khác. then[] gọi lại
const address = fetch["//jsonplaceholder.typicode.com/users/1"]
.then[[response] => response.json[]]
.then[[user] => {
return user.address;
}];
const printAddress = [] => {
address.then[[a] => {
console.log[a];
}];
};
printAddress[];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
HOẶC sử dụng cú pháp async/await
const address = fetch["//jsonplaceholder.typicode.com/users/1"]
.then[[response] => response.json[]]
.then[[user] => {
return user.address;
}];
const printAddress = async [] => {
const a = await address;
console.log[a];
};
printAddress[];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Trong cả hai cách, chúng tôi sẽ nhận được
{
street: 'Kulas Light',
suite: 'Apt. 556',
city: 'Gwenborough',
zipcode: '92998-3874',
geo: { lat: '-37.3159', lng: '81.1496' }
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sự kết luận
Một đối tượng Promise được sử dụng rộng rãi trong lập trình không đồng bộ Javascript. Và đôi khi nó gây nhầm lẫn cho các nhà phát triển về cách sử dụng nó đúng cách. Trong bài đăng trên blog này, tôi đã cố gắng mô tả trường hợp sử dụng khi nhà phát triển cần sử dụng giá trị được trả về từ đối tượng Promise ở đâu đó sau này trong mã