+9

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

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:
image.png

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:
image.png

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

Donate mình một ly cafe hoặc 1 cây bút bi để mình có thêm động lực cho ra nhiều bài viết hay và chất lượng hơn trong tương lai nhé. À mà nếu bạn có bất kỳ câu hỏi nào thì đừng ngại comment hoặc liên hệ mình qua: Zalo - 0374226770 hoặc Facebook. Mình xin cảm ơn.

Momo: NGUYỄN ANH TUẤN - 0374226770

TPBank: NGUYỄN ANH TUẤN - 0374226770 (hoặc 01681423001)

image.png


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí