Bagaimana untuk membuat pembina async dalam Javascript?

Anda berada di sini kerana anda mempunyai soalan : bagaimana saya menunggu pembina Kelas? Bagaimanakah cara saya menjadikan pembina Async???

Dan jawapannya, saya minta maaf, anda sebenarnya tidak boleh. Pembina untuk kelas dalam Javascript mesti disegerakkan. Walau bagaimanapun, terdapat alternatif dalam pelaksanaan yang boleh membantu anda melakukan apa yang anda mahu. Mari terokainya!

Anda mungkin mahu ini kerana anda perlu memulakan sesuatu dalam pembina dan menyediakannya dalam sebarang panggilan yang anda buat ke kelas. Contoh yang baik tentang ini ialah menyambung ke pangkalan data dan menunggu sambungan itu diwujudkan sebelum menerima sebarang pertanyaan.

Corak untuk ini sangat mudah! Mari kita mulakan dengan contoh penyambung pangkalan data, menggunakan modul sqlite pada npm:

import sqlite3 from 'sqlite3';
import { open } from 'sqlite';

Untuk membuka pangkalan data ini, anda perlu menunggu fungsi terbuka. Saya meminta pembantu kod AI mesra saya untuk menghasilkan kelas "DBConnector" dan ia sebenarnya mendapat corak biasa yang betul - yang anda akan lihat di mana-mana:

class DBConnector {
  constructor() {
    this.db = null;
  }

  async connect() {
    this.db = await open({
      filename: './database.sqlite',
      driver: sqlite3.Database,
    });
  }

  async disconnect() {
    await this.db.close();
  }

  async query(sql, params) {
    return this.db.all(sql, params);
  }
}

// exporting a singleton so there's only one connection
export default new DBConnector();

Anda akan memanggil ini hanya dengan mengimportnya dan kemudian menunggu panggilannya:

import db from './dbconnector.js';

await db.connect();
await db.query('GET * FROM test');

Jadi sekarang, masalah di sini sudah tentu, anda bukan sahaja perlu memanggil myDB.connect() secara manual untuk memulakan sambungan, anda juga tidak boleh menjamin bahawa panggilan pertanyaan akan berfungsi, katakan, jika fail lain membuat pertanyaan kerana fail utama anda sedang bersambung.

Pasti, fail utama boleh menunggu db.connect(); , tetapi apa-apa lagi yang mengimport modul ini tidak akan mempunyai apa-apa cara untuk melakukannya. Dan anda mungkin berfikir, "ok tetapi saya boleh memanggil await db.connect(); dalam fail lain juga, bukan?" dan anda boleh... tetapi itu akan menyambung semula ke pangkalan data setiap kali, yang boleh menjadi perlahan bergantung pada apa yang anda gunakan.

Corak Tertunda

Corak yang saya hasilkan melibatkan sedikit lagi kerumitan, tetapi ia kekal mudah dan memastikan setiap kod kecil - dan diri anda sendiri - semuanya gembira. Dan saya sebenarnya menciptanya sendiri, walaupun ia sebenarnya diketahui oleh orang lain. Ia dipanggil janji "Tertunda".

Begini cara ia berfungsi.

// still have our imports
import sqlite3 from 'sqlite3';
import { open } from 'sqlite';

// Create the class
class DBConnector {
  // We'll need these private properties:
  #db;
  #defer;
  #resolve;
  #reject;
  // Then we make our constructor:
  constructor() {

    // We create a new promise and store its resolve and reject
    // functions in the class instance properties.
    this.#defer = new Promise((res, rej) => {
      // this is the magic, right here, basically.
      this.#resolve = res;
      this.#reject = rej;
    });

    // So now, this.#defer is a promise! We can await it in other methods.
    // Now we call our this.connect *internally* and automatically.
    this.connect();
  }

  async connect() {
    try {
      this.#db = await open({
        filename: `./database.sqlite`,
        driver: sqlite3.Database,
      });
      // Now that we resolve the promise, any other method that awaits
      // this.#defer will continue executing.
      this.#resolve();
    } catch (err) {
      // in case of error we can of course reject the promise
      // any code using it would then throw an error.
      this.#reject(err);
    }
  }

  async disconnect() {
    // on any action, we just await this.#defer
    await this.#defer;
    await this.#db.close();
  }

  async query(sql, params) {
    // Even in queries, it works perfectly fine!
    await this.#defer;
    // Here we KNOW that this.#db is already initialized.
    return this.#db.all(sql, params);
  }
}

export default new DBConnector();

Sekarang bukankah itu corak kecil yang menawan? Sudah tentu, lebih banyak kod yang merupakan contoh asas, tetapi secara peribadi, saya fikir ia pasti meningkatkan bar pada kod boilerplate untuk kelas yang kebanyakannya berdasarkan kaedah async.

Jom lihat cara menggunakannya!

import db from './dbconnector.js';

// it's already initialized... just use it!
await db.query('GET * FROM test');
// and it just works :D 

Bonus: Saya membuat perpustakaan!

Saya sering menggunakan corak ini sehingga akhirnya, saya memutuskan untuk membuat perpustakaan yang sangat cepat & kotor dan menerbitkannya di NPM. Ia dipanggil penangguhan dan ia agak remeh untuk digunakan (ia juga agak remeh untuk menulis, setelah saya mengetahui coraknya).

Mari kita buat semula contoh di atas menggunakan penangguhan sebaliknya.

import sqlite3 from 'sqlite3';
import { open } from 'sqlite';

Rentetan 'db' pada asasnya ialah sebarang nama rentetan yang anda mahu berikan kepada penangguhan dan anda boleh mencipta seberapa banyak yang anda suka. Jelas sekali anda tidak memerlukan perpustakaan ini, tetapi secara peribadi saya rasa ia agak bagus, anda tahu?

Saya harap anda mempelajari corak yang sangat berguna di sini, dan saya gembira menjadi sebahagian daripada perjalanan pembelajaran anda hari ini <3

Atas ialah kandungan terperinci Bagaimana untuk membuat pembina async dalam Javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!