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)

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

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.

varcallback=()=>{
  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:

varcallback=function(err, success){if(err){
    console.log("Geek is very sad!");}else{
    console.log("Geek is optimistic, "+"thus becomes successful");}};varcaller=function(status, callback){if(status ==="Happy")callback(null,true);else{callback(newError(),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.
varerror=function(){
  console.log("Geek is very sad!");};varsuccess=function(){
  console.log("Geek is optimistic, "+"thus becomes successful");};varcaller=function(status){returnnewPromise(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",},];constcallback=(err, student)=>{if(err){return`Student with given id ${err} not found`;}else{return"Here is the student: "+ student.name;}};constfindName=(studentId, callbackFunction)=>{let student = students.find(function(studentValue){return studentValue.id == studentId;});if(typeof student ==="undefined"){returncallbackFunction(studentId,false);}else{returncallbackFunction(null, student);}};constgetName=(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",},];constsuccess=(student)=>{return"Here is the student: "+ student.name;};constfailure=(fail)=>{return`Student with the given id ${fail} was not found`;};constfindName=(studentId)=>{returnnewPromise(function(resolve, reject){let student = students.find(function(studentValue){return studentValue.id == studentId;});if(student){resolve(student);}else{reject(id);}});};constgetName=async(req, res)=>{let answer =awaitfindName(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

Nguồn: viblo.asia

Bài viết liên quan

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ