En javascript si tengo una función definida así
function Person() { } Person.prototype.someFunction = function() { // Does soome logic return this } Person.prototype.anotherFunction = function () { // Does soome logic return this; };Y quiero implementar el encadenamiento, haré algo como esto.
const person = new Person(); person.someFunction().anotherFunction()Y esto funciona ya que cada método devuelve la instancia de Person.
Ahora, si tengo un método que tiene alguna acción asíncrona, ¿cómo devuelvo esta instancia en un método asíncrono?
function someApiCall() { return new Promise((res) => { setTimeout(() => { res('got data'); }, 2000); }); } Person.prototype.asyncFunction = function () { someApiCall() .then() .catch() // HOW DO I RETURN THIS INSTANCE HERE ???? as someAPICALL is async };Para que pueda usarlo como
person.someFunction().asyncFunction().anotherFunction()Opción 1 (No se ejecuta en orden):
Person.prototype.asyncFunction1 = function () { someApiCall() .then((e) => console.log(e)) .catch() return this; }; p.anotherFunction().asyncFunction1().anotherFunction()Todas las funciones son llamadas, pero no en orden. Si desea ejecutarlo en orden, simplemente hágalo así:
Opción 2 (Ejecutado en orden):
Person.prototype.asyncFunction2 = async function () { const ans = await someApiCall(); console.log(ans); return this; }; // t represents this as you return it in asyncFunction2 p.anotherFunction().asyncFunction2().then((t) => t.anotherFunction())Está tratando de aplicar un paradigma de programación síncrona a un enfoque de código asíncrono, y eso simplemente no va a funcionar. Cuando se trabaja con promesas, que es lo que async hace por usted de manera automática, en lugar de encadenar instancias, la lógica de su código ahora debe lidiar con el encadenamiento de promesas .
Primero, dejemos de usar la sintaxis de prototype heredada y veamos la sintaxis de clase moderna (donde "moderno" ya tiene más de cinco años):
class Person { async someFunction() { return ... } async anotherFunction() { return ... } } Debido a que async es solo un conveniente envoltorio de promesa, tenemos dos opciones:
const person = new Person(); person .someFunction() .then(result => { person .anotherFunction() .then(result => ...); .catch(e => console.error(e)); }) .catch(e => console.error(e)); pero esto es a la vez engorroso y feo. Usemos await s en su lugar:
const person = new Person(); try { const someResult = await person.someFunction(); const anotherResult = await person..anotherFunction(); ... } catch (e) { console.error(e); }Mucho mejor. Ya no necesitamos el encadenamiento de instancias cuando usamos patrones asíncronos, es un patrón de una era anterior de JS, y escribir código moderno no se beneficia al intentar forzarlo de nuevo.
Algunas personas te dicen que nunca se puede hacer o que simplemente no va a funcionar. No es culpa de ellos por malentendidos, pero no es necesario que sufras de la misma manera que ellos.
Digamos que tiene una clase ordinaria, Account , con algunos métodos async :
class Account { constructor(balance) { this.balance = balance } async withdraw (x) { await sleep(1000) this.balance -= x } async deposit (x) { await sleep(1000) this.balance += x } } sleep es una función simple que retrasa el programa por ms milisegundos -
const sleep = ms => new Promise(r => setTimeout(r, ms)) Ahora podemos escribir una función de chain -
const chain = t => new Proxy(Promise.resolve(t), { get: get(t) }) const get = t => (target, prop) => (...args) => prop === "then" ? target[prop](...args) : chain(target.then(async v => (await v[prop](...args), v)))Aparentemente, esto nos permite mezclar el comportamiento sincrónico y asincrónico:
const A = new Account(100) const B = new Account(200) chain(A).deposit(5).withdraw(20).then(a => console.log("A", a)) chain(B).withdraw(20).withdraw(30).deposit(10).then(b => console.log("B", b))Ejecute el fragmento a continuación para verificar el resultado en su propio navegador:
const sleep = ms => new Promise(r => setTimeout(r, ms)) const get = t => (target, prop) => (...args) => prop === "then" ? target[prop](...args) : chain(target.then(async v => (await v[prop](...args), v))) const chain = t => new Proxy(Promise.resolve(t), { get: get(t) }) class Account { constructor(balance) { this.balance = balance } async withdraw (x) { await sleep(1000) this.balance -= x } async deposit (x) { await sleep(1000) this.balance += x } } const A = new Account(100) const B = new Account(200) chain(A).deposit(5).withdraw(20).then(a => console.log("A", a)) chain(B).withdraw(20).withdraw(30).deposit(10).then(b => console.log("B", b)) console.log("running...") A { balance: 85 } B { balance: 160 }Inventa tu propia comodidad . Es su programa para hacer lo que le plazca.