javascript类中的共享回调处理程序

Question

My current click handler.

let db = new DB()

$('#action-searchByPhone').click(() => {
    db.searchByPhone("0400111221", (customers) => {
        console.log(customers)
    })
})

My current class.

I want to share the functionality of the success handler in this class like I am with the error handler. So I can share the success handler for various methods.

class DB {

    constructor() {
        this.errorHandler = (tx, error) => console.log(error)
    }

    searchByPhone(phone, callback) {
        let successHandler = (tx, result) => {
            let records = Array.from(result.rows)
            callback(records) // how do I pass this in?
        }
        this.db.transaction((tx) => {
            tx.executeSql('SELECT * FROM customer WHERE phone = ?', [phone], successHandler, this.errorHandler)
        })
    }

}

This is what I have tried, but as you might expect it's not working. I am not sure though how I can pass the callback function into the success handler as well though.

class DB {

    constructor() {
        this.successHandler = (tx, result) => {
            let records = Array.from(result.rows)
            callback(records) // how do I pass this in?
        }
        this.errorHandler = (tx, error) => console.log(error)
    }

    searchByPhone(phone, callback) {
        this.db.transaction((tx) => {
            tx.executeSql('SELECT * FROM customer WHERE phone = ?', [phone], this.successHandler, this.errorHandler)
        })
    }

}

Answer 1

Use an anonymous arrow function in the executeSql success callback, which calls the successHandler with callback as an extra argument

class DB {

    constructor() {
        this.successHandler = (tx, result, callback) => {
            let records = Array.from(result.rows)
            callback(records) // how do I pass this in?
        }
        this.errorHandler = (tx, error) => console.log(error)
    }

    searchByPhone(phone, callback) {
        this.db.transaction((tx) => {
            tx.executeSql('SELECT * FROM customer WHERE phone = ?', [phone], (tx, result) => this.successHandler(tx, result, callback), this.errorHandler)
        })
    }

}

I get the feeling the above could (should?) be written as:

class DB {

    constructor() {

    }

    successHandler(tx, result, callback) {
        let records = Array.from(result.rows);
        callback(records);
    }
    errorHandler(tx, error) {
        console.log(error);
    }

    searchByPhone(phone, callback) {
        this.db.transaction(tx => {
            tx.executeSql('SELECT * FROM customer WHERE phone = ?', [phone], (tx, result) => this.successHandler(tx, result, callback), this.errorHandler)
        });
    }

}

You could also use bind, to bind callback as the first argument to successHandler

class DB {

    constructor() {
        this.successHandler = (callback, tx, result) => {
            let records = Array.from(result.rows)
            callback(records) // how do I pass this in?
        }
        this.errorHandler = (tx, error) => console.log(error)
    }

    searchByPhone(phone, callback) {
        this.db.transaction((tx) => {
            tx.executeSql('SELECT * FROM customer WHERE phone = ?', [phone], this.successHandler.bind(this, callback), this.errorHandler)
        })
    }

}