Javascript Promise außerhalb des Funktionsumfangs auflösen

Ich habe ES6 Promise verwendet.

Normalerweise wird ein Versprechen so konstruiert und verwendet

new Promise(function(resolve, reject){
    if (someCondition){
        resolve();
    } else {
        reject();
    } 
});

Aber ich habe etwas wie das Folgende getan, um die Entschlossenheit aus Gründen der Flexibilität nach draußen zu bringen.

var outsideResolve;
var outsideReject;
new Promise(function(resolve, reject) { 
    outsideResolve = resolve; 
    outsideReject = reject; 
});

Und später

onClick = function(){
    outsideResolve();
}

Das funktioniert gut, aber gibt es einen einfacheren Weg, dies zu tun? Wenn nicht, ist dies eine gute Praxis?

Nein, es gibt keinen anderen Weg, dies zu tun - das einzige, was ich sagen kann, ist, dass dieser Anwendungsfall nicht sehr häufig ist. Wie Felix im Kommentar sagte - was Sie tun, wird konsequent funktionieren.

Es ist erwähnenswert, dass der Grund, warum sich der Versprechen-Konstruktor so verhält, die Wurfsicherheit ist. Wenn eine Ausnahme, die Sie nicht erwartet haben, auftritt, während Ihr Code im Versprechen-Konstruktor ausgeführt wird, wird dies zu einer Ablehnung, dieser Form der Wurfsicherheit - Konvertieren von geworfenen Fehlern in Ablehnungen sind wichtig und helfen dabei, vorhersehbaren Code beizubehalten.

Aus Gründen der Wurfsicherheit wurde der Versprechenskonstruktor gegenüber verzögerten Konstruktionen ausgewählt (dies ist eine alternative Versprechungskonstruktionsmethode, die das erlaubt, was Sie tun). Was Best Practices betrifft, würde ich das Element übergeben und stattdessen den Versprechungskonstruktor verwenden:

var p = new Promise(function(resolve, reject){
    this.onclick = resolve;
}.bind(this));

Aus diesem Grund - wann immer Sie können das Versprechen Konstruktor über den Export der Funktionen - Ich empfehle Ihnen , es zu verwenden. Wann immer Sie beides vermeiden können - vermeiden Sie beides und die Kette.

Beachten Sie, dass Sie den Versprechen-Konstruktor niemals für Dinge wie if(condition)das erste Beispiel verwenden sollten, das wie folgt geschrieben werden könnte:

var p = Promise[(someCondition)?"resolve":"reject"]();

einfach:

var promiseResolve, promiseReject;

var promise = new Promise(function(resolve, reject){
  promiseResolve = resolve;
  promiseReject = reject;
});

promiseResolve();

Etwas spät zur Party hier, aber eine andere Möglichkeit wäre die Verwendung eines verzögerten Objekts. Sie haben im Wesentlichen die gleiche Menge an Boilerplate, aber es ist praktisch, wenn Sie sie weitergeben und möglicherweise außerhalb ihrer Definition auflösen möchten.

Naive Implementierung:

class Deferred {
  constructor() {
    this.promise = new Promise((resolve, reject)=> {
      this.reject = reject
      this.resolve = resolve
    })
  }
}

function asyncAction() {
  var dfd = new Deferred()

  setTimeout(()=> {
    dfd.resolve(42)
  }, 500)

  return dfd.promise
}

asyncAction().then(result => {
  console.log(result) // 42
})

ES5-Version:

function Deferred() {
  var self = this;
  this.promise = new Promise(function(resolve, reject) {
    self.reject = reject
    self.resolve = resolve
  })
}

function asyncAction() {
  var dfd = new Deferred()

  setTimeout(function() {
    dfd.resolve(42)
  }, 500)

  return dfd.promise
}

asyncAction().then(function(result) {
  console.log(result) // 42
})

Eine Lösung, die ich 2015 für mein Framework gefunden habe. Ich habe diese Art von Versprechen Aufgabe genannt

function createPromise(handler){
  var _resolve, _reject;

  var promise = new Promise(function(resolve, reject){
    _resolve = resolve; 
    _reject = reject;

    handler(resolve, reject);
  })

  promise.resolve = _resolve;
  promise.reject = _reject;

  return promise;
}

var promise = createPromise()
promise.then(function(data){ alert(data) })

promise.resolve(200) // resolve from outside

Ich mochte @ JonJaques Antwort, aber ich wollte noch einen Schritt weiter gehen.

Wenn Sie thenund catchdann das DeferredObjekt binden , implementiert es die PromiseAPI vollständig und Sie können es als Versprechen behandeln und awaites und so.

class DeferredPromise {
  constructor() {
    this._promise = new Promise((resolve, reject) => {
      // assign the resolve and reject functions to `this`
      // making them usable on the class instance
      this.resolve = resolve;
      this.reject = reject;
    });
    // bind `then` and `catch` to implement the same interface as Promise
    this.then = this._promise.then.bind(this._promise);
    this.catch = this._promise.catch.bind(this._promise);
    this[Symbol.toStringTag] = 'Promise';
  }
}

const deferred = new DeferredPromise();
console.log('waiting 2 seconds...');
setTimeout(() => {
  deferred.resolve('whoa!');
}, 2000);

async function someAsyncFunction() {
  const value = await deferred;
  console.log(value);
}

someAsyncFunction();

Eine Hilfsmethode würde diesen zusätzlichen Aufwand verringern und Ihnen das gleiche jQuery-Gefühl vermitteln.

function Deferred() {
    let resolve;
    let reject;
    const promise = new Promise((res, rej) => {
        resolve = res;
        reject = rej;
    });
    return { promise, resolve, reject };
}

Verwendung wäre

const { promise, resolve, reject } = Deferred();
displayConfirmationDialog({
    confirm: resolve,
    cancel: reject
});
return promise;

Welches ist ähnlich wie jQuery

const dfd = $.Deferred();
displayConfirmationDialog({
    confirm: dfd.resolve,
    cancel: dfd.reject
});
return dfd.promise();

Obwohl in einem Anwendungsfall diese einfache, native Syntax in Ordnung ist

return new Promise((resolve, reject) => {
    displayConfirmationDialog({
        confirm: resolve,
        cancel: reject
    });
});

Ich benutze eine Hilfsfunktion, um ein "flaches Versprechen" zu erstellen -

function flatPromise() {

    let resolve, reject;

    const promise = new Promise((res, rej) => {
      resolve = res;
      reject = rej;
    });

    return { promise, resolve, reject };
}

Und ich benutze es so -

function doSomethingAsync() {

    // Get your promise and callbacks
    const { resolve, reject, promise } = flatPromise();

    // Do something amazing...
    setTimeout(() => {
        resolve('done!');
    }, 500);

    // Pass your promise to the world
    return promise;

}

Vollständiges Arbeitsbeispiel anzeigen -

function flatPromise() {

    let resolve, reject;

    const promise = new Promise((res, rej) => {
        resolve = res;
        reject = rej;
    });

    return { promise, resolve, reject };
}

function doSomethingAsync() {
    
    // Get your promise and callbacks
    const { resolve, reject, promise } = flatPromise();

    // Do something amazing...
    setTimeout(() => {
        resolve('done!');
    }, 500);

    // Pass your promise to the world
    return promise;
}

(async function run() {

    const result = await doSomethingAsync()
        .catch(err => console.error('rejected with', err));
    console.log(result);

})();

Bearbeiten: Ich habe ein NPM-Paket namens Flat-Promise erstellt und der Code ist auch auf GitHub verfügbar .

Sie können das Versprechen in eine Klasse einschließen.

class Deferred {
    constructor(handler) {
        this.promise = new Promise((resolve, reject) => {
            this.reject = reject;
            this.resolve = resolve;
            handler(resolve, reject);
        });

        this.promise.resolve = this.resolve;
        this.promise.reject = this.reject;

        return this.promise;
    }
    promise;
    resolve;
    reject;
}

// How to use.
const promise = new Deferred((resolve, reject) => {
  // Use like normal Promise.
});

promise.resolve(); // Resolve from any context.

Viele der Antworten hier ähneln dem letzten Beispiel in diesem Artikel . Ich speichere mehrere Versprechen zwischen, und die Funktionen resolve()und reject()können jeder Variablen oder Eigenschaft zugewiesen werden. Dadurch kann ich diesen Code etwas kompakter gestalten:

function defer(obj) {
    obj.promise = new Promise((resolve, reject) => {
        obj.resolve = resolve;
        obj.reject  = reject;
    });
}

Hier ist ein vereinfachtes Beispiel für die Verwendung dieser Version von defer(), um ein FontFaceLadeversprechen mit einem anderen asynchronen Prozess zu kombinieren :

function onDOMContentLoaded(evt) {
    let all = []; // array of Promises
    glob = {};    // global object used elsewhere
    defer(glob);
    all.push(glob.promise);
    // launch async process with callback = resolveGlob()

    const myFont = new FontFace("myFont", "url(myFont.woff2)");
    document.fonts.add(myFont);
    myFont.load();
    all.push[myFont];
    Promise.all(all).then(() => { runIt(); }, (v) => { alert(v); });
}
//...
function resolveGlob() {
    glob.resolve();
}
function runIt() {} // runs after all promises resolved 

Update: 2 Alternativen für den Fall, dass Sie das Objekt kapseln möchten:

function defer(obj = {}) {
    obj.promise = new Promise((resolve, reject) => {
        obj.resolve = resolve;
        obj.reject  = reject;
    });
    return obj;
}
let deferred = defer();

und

class Deferred {
    constructor() {
        this.promise = new Promise((resolve, reject) => {
            this.resolve = resolve;
            this.reject  = reject;
        });
    }
}
let deferred = new Deferred();

Akzeptierte Antwort ist falsch. Es ist ziemlich einfach, Umfang und Referenzen zu verwenden, obwohl es Promise- Puristen verärgern kann:

const createPromise = () => {
    let resolver;
    return [
        new Promise((resolve, reject) => {
            resolver = resolve;
        }),
        resolver,
    ];
};

const [ promise, resolver ] = createPromise();
promise.then(value => console.log(value));
setTimeout(() => resolver('foo'), 1000);

Wir greifen im Wesentlichen auf den Verweis auf die Auflösungsfunktion zurück, wenn das Versprechen erstellt wird, und geben dies zurück, damit es extern festgelegt werden kann.

In einer Sekunde gibt die Konsole Folgendes aus:

> foo

Ja, du kannst. Durch Verwendung der CustomEventAPI für die Browserumgebung. Und Verwenden eines Event-Emitter-Projekts in node.js-Umgebungen. Da sich das fragliche Snippet auf die Browserumgebung bezieht, finden Sie hier ein funktionierendes Beispiel dafür.

function myPromiseReturningFunction(){
  return new Promise(resolve => {
    window.addEventListener("myCustomEvent", (event) => {
       resolve(event.detail);
    }) 
  })
}


myPromiseReturningFunction().then(result => {
   alert(result)
})

document.getElementById("p").addEventListener("click", () => {
   window.dispatchEvent(new CustomEvent("myCustomEvent", {detail : "It works!"}))
})

<p id="p"> Click me </p>

Ich hoffe diese Antwort ist nützlich!

Unsere Lösung bestand darin, Verschlüsse zum Speichern der Auflösungs- / Ablehnungsfunktionen zu verwenden und zusätzlich eine Funktion anzuhängen, um das Versprechen selbst zu erweitern.

Hier ist das Muster:

function getPromise() {

    var _resolve, _reject;

    var promise = new Promise((resolve, reject) => {
        _reject = reject;
        _resolve = resolve;
    });

    promise.resolve_ex = (value) => {
       _resolve(value);
    };

    promise.reject_ex = (value) => {
       _reject(value);
    };

    return promise;
}

Und damit:

var promise = getPromise();

promise.then(value => {
    console.info('The promise has been fulfilled: ' + value);
});

promise.resolve_ex('hello');  
// or the reject version 
//promise.reject_ex('goodbye');

In bestimmten Fällen fehlt mir auch das verzögerte Muster. Sie können jederzeit eine über einem ES6-Versprechen erstellen:

export default class Deferred<T> {
    private _resolve: (value: T) => void = () => {};
    private _reject: (value: T) => void = () => {};

    private _promise: Promise<T> = new Promise<T>((resolve, reject) => {
        this._reject = reject;
        this._resolve = resolve;
    })

    public get promise(): Promise<T> {
        return this._promise;
    }

    public resolve(value: T) {
        this._resolve(value);
    }

    public reject(value: T) {
        this._reject(value);
    }
}

Vielen Dank an alle, die in diesem Thread gepostet haben. Ich habe ein Modul erstellt, das das zuvor beschriebene Defer () -Objekt sowie einige andere darauf aufgebaute Objekte enthält. Sie alle nutzen Promises und die übersichtliche Promise-Rückrufsyntax, um die Kommunikation / Ereignisbehandlung in einem Programm zu implementieren.

• Aufschieben: Versprechen, das aus der Ferne gelöst werden kann, fehlgeschlagen (außerhalb seines Körpers)
• Verzögerung: Versprechen, das nach einer bestimmten Zeit automatisch aufgelöst wird
• TimeOut: Versprechen, das nach einer bestimmten Zeit automatisch fehlschlägt.
• Zyklus: Wieder auslösbares Versprechen, Ereignisse mit der Promise-Syntax zu verwalten

• Warteschlange: Ausführungswarteschlange basierend auf Promise-Verkettung.

  rp = require("repeatable-promise")

  https://github.com/CABrouwers/repeatable-promise

Ich habe dafür eine kleine Bibliothek geschrieben. https://www.npmjs.com/package/@inf3rno/promise.exposed

Ich habe andere den Factory - Methode Ansatz geschrieben, aber ich overrode die then, catch, finallyzu Methoden, so können Sie das ursprüngliche Versprechen von denen auch lösen.

Versprechen ohne Testamentsvollstrecker von außen lösen:

const promise = Promise.exposed().then(console.log);
promise.resolve("This should show up in the console.");

Rennen mit dem setTimeout des Testamentsvollstreckers von außen:

const promise = Promise.exposed(function (resolve, reject){
    setTimeout(function (){
        resolve("I almost fell asleep.")
    }, 100000);
}).then(console.log);

setTimeout(function (){
    promise.resolve("I don't want to wait that much.");
}, 100);

Es gibt einen konfliktfreien Modus, wenn Sie den globalen Namespace nicht verschmutzen möchten:

const createExposedPromise = require("@inf3rno/promise.exposed/noConflict");
const promise = createExposedPromise().then(console.log);
promise.resolve("This should show up in the console.");

Ich habe eine Bibliothek namens erstellt manual-promise, die als Ersatz für fungiert Promise. Keine der anderen Antworten hier funktioniert als Ersatz Promise, da sie Proxys oder Wrapper verwenden.

yarn add manual-promise

npn install manual-promise

import { ManualPromise } from "manual-promise";

const prom = new ManualPromise();

prom.resolve(2);

// actions can still be run inside the promise
const prom2 = new ManualPromise((resolve, reject) => {
    // ... code
});


new ManualPromise() instanceof Promise === true

https://github.com/zpxp/manual-promise#readme

Wie wäre es, eine Funktion zu erstellen, um die Zurückweisung zu entführen und zurückzugeben?

function createRejectablePromise(handler) {
  let _reject;

  const promise = new Promise((resolve, reject) => {
    _reject = reject;

    handler(resolve, reject);
  })

  promise.reject = _reject;
  return promise;
}

// Usage
const { reject } = createRejectablePromise((resolve) => {
  setTimeout(() => {
    console.log('resolved')
    resolve();
  }, 2000)

});

reject();

Ich habe eine Übersicht zusammengestellt, die diese Aufgabe erfüllt: https://gist.github.com/thiagoh/c24310b562d50a14f3e7602a82b4ef13

So sollten Sie es verwenden:

import ExternalizedPromiseCreator from '../externalized-promise';

describe('ExternalizedPromise', () => {
  let fn: jest.Mock;
  let deferredFn: jest.Mock;
  let neverCalledFn: jest.Mock;
  beforeEach(() => {
    fn = jest.fn();
    deferredFn = jest.fn();
    neverCalledFn = jest.fn();
  });

  it('resolve should resolve the promise', done => {
    const externalizedPromise = ExternalizedPromiseCreator.create(() => fn());

    externalizedPromise
      .promise
      .then(() => deferredFn())
      .catch(() => neverCalledFn())
      .then(() => {
        expect(deferredFn).toHaveBeenCalled();
        expect(neverCalledFn).not.toHaveBeenCalled();
        done();
      });

    expect(fn).toHaveBeenCalled();
    expect(neverCalledFn).not.toHaveBeenCalled();
    expect(deferredFn).not.toHaveBeenCalled();

    externalizedPromise.resolve();
  });
  ...
});

Aktivieren Sie zuerst die Syntax --allow-natives-im Browser oder Knoten

const p = new Promise(function(resolve, reject){
    if (someCondition){
        resolve();
    } else {
        reject();
    } 
});

onClick = function () {
    %ResolvePromise(p, value)
}

Nur eine weitere Lösung, um Promise von außen zu lösen

 class Lock {
        #lock;  // Promise to be resolved (on  release)
        release;  // Release lock
        id;  // Id of lock
        constructor(id) {
            this.id = id
            this.#lock = new Promise((resolve) => {
                this.release = () => {
                    if (resolve) {
                        resolve()
                    } else {
                        Promise.resolve()
                    }
                }
            })
        }
        get() { return this.#lock }
    }

Verwendung

let lock = new Lock(... some id ...);
...
lock.get().then(()=>{console.log('resolved/released')})
lock.release()  // Excpected 'resolved/released'