- vừa được xem lúc

Blog#17: Làm thế nào để chuyển đổi Callback thành Promise trong Javascript/Node.js? 😊 (Series: Bí kíp Javascript - PHẦN 14)

0 0 30

Người đăng: NGUYỄN ANH TUẤN

Theo Viblo Asia

Mình là TUẤN hiện đang là một Full-stack Developer tại Tokyo 😉. Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé 😊.

Callback : Về JavaScript thì callback là một hàm được truyền dưới dạng tham số cho một hàm khác. Hàm thực thi ngay khi kết quả của hàm gọi sẵn sàng. Nói cách đơn giản, nó xử lý các yêu cầu không đồng bộ của JavaScript.

Ví dụ tốt nhất để chứng minh điều này là sử dụng một hàm setTimeout () nhận một hàm callback và trì hoãn việc thực thi code. Ngay sau khi hết thời gian đặt cho hàm, hàm callback sẽ thực thi.

var callback = () => { console.log("Hello! GeeksforGeeks");
}; setTimeout(callback, 2000);

Đầu ra:

Hello! GeeksforGeeks

Promise: Nó rất giống với các lệnh callback đang hoạt động. Tuy nhiên, lợi thế của việc sử dụng Promises là cải thiện khả năng đọc code vì nó giúp chúng ta thoát khỏi callback hell.
Promise có bốn state:

  • Pending: Promise vẫn chưa hoàn thành. Không thành công cũng chưa thất bại.
  • Fulfilled: Promise kết thúc thành công.
  • Reject: Promise kết thúc bằng một lỗi.
  • Settled: Promise có lỗi hoặc đã thành công.

Chuyển một lệnh callback hiện có thành Promise:

var callback = function (err, success) { if (err) { console.log("Geek is very sad!"); } else { console.log("Geek is optimistic, " + "thus becomes successful"); }
}; var caller = function (status, callback) { if (status === "Happy") callback(null, true); else { callback(new Error(), false); }
}; caller("Happy", callback);
caller("Sad", callback);

Đầu ra:

Geek is optimistic, thus becomes successful
Geek is very sad!

Các bước thực hiện chuyển đổi code ở trên thành Promise:

  • Tạo một hàm có tên error và chèn khối code xử lý khi gặp lỗi ở trên của hàm callback vào đó.
  • Tạo một function có tên là success và chèn khối code xử lý khi thành công ở trên vào đó.
  • Sau đó, sửa đổi code caller bằng cách trả về đối tượng promise.
  • Sử dụng các hàm success và error theo bất kỳ cách nào sau đây.
  • Xem đoạn code dưới đây để hiểu rõ hơn.
var error = function () { console.log("Geek is very sad!");
}; var success = function () { console.log("Geek is optimistic, " + "thus becomes successful");
}; var caller = function (status) { return new Promise(function (resolve, reject) { if (status === "Happy") { resolve(); } else { reject(); } });
}; caller("Happy").then(success).catch(error);
caller("Sad").then(success).catch(error);

Đầu ra:

Geek is optimistic, thus becomes successful
Geek is very sad!

Áp dụng chúng vào Nodejs nào.

Cài đặt Nodejs và thiết lập một ứng dụng Node đơn giản bằng cách làm theo các bước được hiển thị ở đây .

Ví dụ: Ở đây, kịch bản là chúng ta có một array sinh viên có idtên là các value. Chúng ta cần lấy tên của sinh viênid đã cho. Chúng ta được cung cấp một lệnh callback hiện có cần được chuyển đổi thành một promise.

const express = require("express");
const app = express(); var students = [ { id: 101, name: "Geek A", }, { id: 102, name: "Geek B", }, { id: 103, name: "Geek C", }, { id: 104, name: "Geek D", },
]; const callback = (err, student) => { if (err) { return `Student with given id ${err} not found`; } else { return "Here is the student: " + student.name; }
}; const findName = (studentId, callbackFunction) => { let student = students.find(function (studentValue) { return studentValue.id == studentId; }); if (typeof student === "undefined") { return callbackFunction(studentId, false); } else { return callbackFunction(null, student); }
}; const getName = (req, res) => { res.send(findName(req.params.studentId, callback));
}; app.get("/getName/:studentId", getName); app.listen(8000, "localhost", function () { console.log("Server Listening");
});

Đầu ra:

Bây giờ, chúng ta có thể chuyển đổi hàm callback thành các promise. Tại đây, chúng ta có thể thực hiện lại các bước trước đó, tức là logic Error trong hàm failure và logic Thành công trong hàm success. Xem đoạn code dưới đây để rõ hơn.

const express = require("express");
const app = express(); var students = [ { id: 101, name: "Geek A", }, { id: 102, name: "Geek B", }, { id: 103, name: "Geek C", }, { id: 104, name: "Geek D", },
]; const success = (student) => { return "Here is the student: " + student.name;
}; const failure = (fail) => { return `Student with the given id ${fail} was not found`;
}; const findName = (studentId) => { return new Promise(function (resolve, reject) { let student = students.find(function (studentValue) { return studentValue.id == studentId; }); if (student) { resolve(student); } else { reject(id); } });
}; const getName = async (req, res) => { let answer = await findName(req.params.studentId) .then(success) .catch(failure); res.send(answer);
}; app.get("/getName/:studentId", getName); app.listen(8000, "localhost", function () { console.log("Server Listening");
});

Đầu ra:

Như mọi khi, mình hy vọng bạn thích bài viết này và biết thêm được điều gì đó mới.

Cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo! 😍

Nếu bạn thấy thích blog của mình thì nhấn theo dõi để ủng hộ mình nhé. Thank you.😉

Ref

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 145

- vừa được xem lúc

Biến đổi một Promise

Khái niệm Promise đã khá quen thuộc với chúng ta rồi. Khi muốn tạo hoặc nhận xử lý bất đồng bộ (xử lý chờ) trong javascript chúng ta thường sẽ nghĩ đến và sử dụng Promise.

0 0 36

- vừa được xem lúc

Tìm hiểu về Synchronous và Asynchronous trong Javascript

1. Giới Thiệu.

0 0 88

- vừa được xem lúc

JavaScript: từ Callbacks đến Promises và Async/Await

Để bắt đầu, hãy xem đoạn code sau:. result1 = doSomething1();. result2 = doSomething2(result1);. .

0 0 39

- vừa được xem lúc

Sơ lược vòng đời của Event loop callback promise async await trong Javascript qua chuyện tăng lương

Video được đăng tại channel Tips Javascript

0 0 29

- vừa được xem lúc

Lợi ích của Promise so với async-await đa số người chưa biết về 3 cách | Promises or async-await

Video được đăng tại channel Tips Javascript

0 0 28