Membina XPromise: Menyelam Dalam Janji JavaScript Tersuai

JavaScript terkenal dengan sifat tak segeraknya, membolehkan operasi seperti pengambilan data, animasi dan pengendalian fail tanpa menyekat proses lain. Janji adalah teras dalam mengendalikan operasi tak segerak dengan anggun, menjadikan kod kami lebih bersih dan lebih mudah diurus. Projek ini, XPromise, ialah pelaksanaan tersuai Janji JavaScript, membantu kami meneroka cara mekanisme Janji berfungsi secara dalaman.

Anda boleh menyemak pelaksanaan penuh di GitHub.

Apa itu Janji?

Janji dalam JavaScript ialah objek khas yang mewakili penyiapan atau kegagalan operasi tak segerak. Dengan Janji, kita boleh beratur dalam operasi untuk dijalankan selepas selesai tugasan, walaupun kita tidak tahu bila ia akan dilakukan. Inilah yang menjadikan Janji unik:

1. Tiga Negeri: Janji boleh Belum selesai, Ditepati atau Ditolak.
2. Perubahan Keadaan Kekal: Setelah Janji diselesaikan (ditepati atau ditolak), ia tidak boleh menukar keadaan.
3. Merantai dengan .then dan .catch: Janji menyediakan .then() untuk mengendalikan nilai yang dipenuhi dan .catch() untuk ralat, menjadikannya boleh dikompilasi.

Mengapa Membina Janji Tersuai?

Mencipta Janji tersuai, seperti XPromise, memberikan pemahaman yang lebih mendalam tentang kerja dalamannya:

• Pengurusan Negeri: Kami mengendalikan negeri dengan cara yang memastikan hanya satu keadaan akhir.
• Baris Gilir Panggilan Balik: Janji mesti menyusun baris gilir panggilan balik untuk dilaksanakan sebaik sahaja ia diselesaikan.
• Pengendalian Ralat: Ini termasuk cara untuk mengendalikan ralat tak segerak dengan anggun, mencontohi tingkah laku Promise asli.

Panduan Projek

Mari kita lihat kod untuk XPromise, meneroka setiap komponen yang menjadikannya berfungsi sama seperti Janji asli JavaScript.

Menetapkan Keadaan dan Struktur Asas

XPromise bermula dengan mentakrifkan tiga keadaan: PENDING, DIPENUHI dan DITOLAK.

const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class XPromise {
  constructor(executor) {
    this.state = PENDING;
    this.queue = [];
    doResolve(this, executor);
  }
  // ...
}

1. Pembina dan Persediaan Awal:
   • XPromise menerima fungsi pelaksana, yang berjalan serta-merta.
   • this.state menjejaki keadaan semasa, manakala this.queue memegang semua fungsi yang dibariskan oleh panggilan .then().

Menambah kaedah kemudian, tangkap, dan akhirnya

Setelah itu, tangkap dan akhirnya, kami mengendalikan senario yang dipenuhi, ditolak dan pembersihan. Begini cara XPromise mencapai rantaian:

const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class XPromise {
  constructor(executor) {
    this.state = PENDING;
    this.queue = [];
    doResolve(this, executor);
  }
  // ...
}

1. kemudian: Kaedah kemudian mencipta tika XPromise baharu dan menyimpannya bersama-sama dengan panggilan balik onFulfilled dan onRejected. Ini memastikan Janji seterusnya dalam rantaian menerima output yang sebelumnya.
2. tangkap: Kata ringkas untuk mengendalikan ralat, bersamaan dengan memanggil kemudian(null, onRejected).
3. akhirnya: Mengendalikan tindakan pembersihan yang dilaksanakan tanpa mengira keputusan Janji.

Menguruskan Negeri yang Diputuskan dengan pemegang

Fungsi pemegang menentukan sama ada Janji masih belum selesai atau diselesaikan. Jika belum selesai, pengendali akan ditambahkan pada baris gilir untuk dilaksanakan kemudian. Jika Janji diselesaikan, ia segera memproses pengendali.

then(onFulfilled, onRejected) {
  const promise = new XPromise(() => {});
  handle(this, { promise, onFulfilled, onRejected });
  return promise;
}

catch(onRejected) {
  return this.then(null, onRejected);
}

finally(onFinally) {
  return this.then(onFinally, onFinally);
}

Menyelesaikan dan Menolak Janji

Janji yang ditepati dan ditolak memerlukan fungsi khas untuk mengendalikan keputusannya. Begini cara XPromise mencapainya:

function handle(promise, handler) {
  while (promise.state !== REJECTED && promise.value instanceof XPromise) {
    promise = promise.value;
  }

  if (promise.state === PENDING) {
    promise.queue.push(handler);
  } else {
    handleResolved(promise, handler);
  }
}

1. Isi dan Tolak:

   • memenuhi dan menolak memuktamadkan Janji, mengemas kini keadaan dan nilainya.
   • Jika nilai adalah Janji atau boleh, kami menangguhkan doResolve untuk memastikan ia dikendalikan dengan betul.

2. Memuktamadkan Pengendali Beratur:

   • Setelah Janji diselesaikan, penamat akan berulang melalui baris gilir untuk melaksanakan semua pengendali mengikut urutan.

Fungsi Pelaksana doResolve

Fungsi doResolve menjalankan pelaksana dengan selamat dengan membungkus penyelesaian dan menolak panggilan, menghalang sebarang perubahan keadaan selanjutnya jika ia dipanggil beberapa kali.

function fulfill(promise, value) {
  if (value === promise) {
    return reject(promise, new TypeError());
  }

  if (value && (typeof value === "object" || typeof value === "function")) {
    let then;
    try {
      then = value.then;
    } catch (e) {
      return reject(promise, e);
    }

    if (typeof then === "function") {
      return doResolve(promise, then.bind(value));
    }
  }

  promise.state = FULFILLED;
  promise.value = value;
  finale(promise);
}

function reject(promise, reason) {
  promise.state = REJECTED;
  promise.value = reason;
  finale(promise);
}

Contoh Penggunaan XPromise

Sekarang kami mempunyai XPromise yang berfungsi, mari cuba dengan contoh mudah:

function doResolve(promise, executor) {
  let called = false;
  function wrapFulfill(value) {
    if (called) return;
    called = true;
    fulfill(promise, value);
  }

  function wrapReject(reason) {
    if (called) return;
    called = true;
    reject(promise, reason);
  }
  try {
    executor(wrapFulfill, wrapReject);
  } catch (e) {
    wrapReject(e);
  }
}

Pengambilan Utama

Melaksanakan Semula Janji dari awal memberikan pandangan langsung tentang cara pengaturcaraan tak segerak diurus dalam JavaScript:

• Pengurusan Negeri memastikan bahawa Janji diselesaikan sekali sahaja, kekal sama ada ditepati atau ditolak.
• Baris Gilir Panggilan Balik membolehkan anda mengendalikan berbilang panggilan .then() berantai dengan berkesan.
• Pengendalian Ralat dengan tangkapan dan akhirnya membantu dalam mengendalikan ralat tak segerak dengan anggun.

Untuk menyelami lebih mendalam tentang kod, lihat projek XPromise di GitHub. Eksperimen dengan kod dan jangan ragu untuk menyesuaikannya untuk meneroka ciri yang lebih maju, seperti keadaan perlumbaan Promise, rantaian dan sarang!

Atas ialah kandungan terperinci Membina XPromise: Menyelam Dalam Janji JavaScript Tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!