Javascript Promise'ın işlev kapsamının dışında kalmasını sağlayın

ES6 Promise kullanıyorum.

Normalde, bir Söz böyle inşa edilir ve kullanılır

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

Ama esneklik uğruna dışarıdaki çözümü almak için aşağıdaki gibi bir şey yapıyorum.

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

Ve sonra

onClick = function(){
    outsideResolve();
}

Bu iyi çalışıyor, ancak bunu yapmanın daha kolay bir yolu var mı? Değilse, bu iyi bir uygulama mı?

Hayır, bunu yapmanın başka bir yolu yok - söyleyebileceğim tek şey bu kullanım durumunun çok yaygın olmadığıdır. Felix'in yorumda söylediği gibi - yaptığınız şey sürekli olarak çalışacaktır.

Söz vericinin bu şekilde davranmasının nedeninin atma güvenliği olduğunu belirtmek gerekir - kodunuz söz vericinin içinde çalışırken beklemediğiniz bir istisna gerçekleşirse, bu bir reddetmeye dönüşecektir, bu atma güvenliği biçimi - atılan hataları Reddetme önemlidir ve öngörülebilir kodun korunmasına yardımcı olur.

Bu atış güvenliği nedeni için, söz veren kurucu ertelemeler (bu, ne yaptığınıza izin veren alternatif bir söz verme yolu) olarak seçildi - en iyi uygulamalarda olduğu gibi - öğeyi geçip söz vericiyi kullanacağım:

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

Ne zaman - bu nedenle can işlevleri ihracat üzerinde söz yapıcı kullanmak - Bunu kullanırım önerilir. Her ikisinden de kaçınabileceğiniz zaman - her ikisinden de ve zincirden kaçının.

Söz veren yapıcıyı asla böyle şeyler için kullanmamalısınız if(condition), ilk örnek şu şekilde yazılabilir:

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

basit:

var promiseResolve, promiseReject;

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

promiseResolve();

Burada partiye biraz geç, ama bunu yapmanın başka bir yolu Ertelenmiş bir nesne kullanmak olacaktır . Esasen aynı miktarda kazan plakasına sahipsiniz, ancak bunları etrafta geçirmek ve muhtemelen tanımlarının dışında çözmek istiyorsanız kullanışlıdır.

Saf Uygulama:

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 Sürümü:

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
})

Çerçevem ​​için 2015 yılında bulduğum bir çözüm. Bu tür sözleri Görev olarak adlandırdım

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

@JonJaques cevabını beğendim ama bir adım daha ileri almak istedim.

Eğer nesneyi bağlar thenve catchsonra Deferred, o zaman tamamen PromiseAPI uygular ve awaitonu söz ve o ve benzeri olarak ele alabilirsiniz.

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();

Bir yardımcı yöntem bu ek yükü hafifletir ve size aynı jQuery hissini verir.

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

Kullanım olurdu

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

JQuery benzer

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

Her ne kadar, bir kullanım durumunda bu basit, yerel sözdizimi iyidir

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

Ben "düz söz" dediğim şeyi oluşturmak için bir yardımcı işlevi kullanıyorum -

function flatPromise() {

    let resolve, reject;

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

    return { promise, resolve, reject };
}

Ve ben böyle kullanıyorum -

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;

}

Tüm çalışma örneğine bakın -

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);

})();

Düzenleme: Flat-promise adlı bir NPM paketi oluşturdum ve kod GitHub'da da mevcut .

Sözü bir sınıfa sarabilirsiniz.

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.

Buradaki cevapların çoğu bu makaledeki son örneğe benzer . Birden fazla Promise önbelleğe alıyorum ve resolve()ve reject()fonksiyonları herhangi bir değişkene veya özelliğe atanabilir. Sonuç olarak bu kodu biraz daha kompakt hale getirebiliyorum:

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

defer()Bir FontFaceYük Vaatini başka bir zaman uyumsuz işlemle birleştirmek için bu sürümünün kullanılmasının basitleştirilmiş bir örneği :

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 

Güncelleme: Nesneyi kapsüllemek istediğinizde 2 alternatif:

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

ve

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

Kabul edilen cevap yanlış. Kapsam ve referansları kullanmak oldukça kolaydır, ancak Promise saflarını öfkelendirebilir:

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);

Söz verildiği zaman temelde çözüm işlevine referans alıyoruz ve bunu harici olarak ayarlanabilmesi için geri döndürüyoruz.

Bir saniye içinde konsol çıktı verecektir:

> foo

Evet yapabilirsin. CustomEventTarayıcı ortamı için API kullanarak . Ve node.js ortamlarında bir olay yayıcı proje kullanmak. Söz konusu pasaj tarayıcı ortamı için olduğundan, bunun için çalışan bir örnek.

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>

Umarım bu cevap faydalıdır!

Çözümümüz, çözme / reddetme işlevlerini saklamak ve ek olarak sözün kendisini genişletmek için bir işlev eklemek için kapaklar kullanmaktı.

İşte desen:

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;
}

Ve kullanarak:

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');

Bazı durumlarda ertelenmiş kalıbı kendim de eksik buluyorum. Her zaman bir ES6 Sözünün üstünde bir tane oluşturabilirsiniz:

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);
    }
}

Bu konuyu yayınlayan herkese teşekkürler. Daha önce açıklanan Defer () nesnesini ve üzerine inşa edilmiş birkaç nesneyi içeren bir modül oluşturdum. Hepsi bir programda iletişim / olay işlemeyi uygulamak için Promises ve temiz Promise geri arama sözdizimini kullanır.

• Ertele: Uzaktan çözülebilecek söz (bedeni dışında)
• Gecikme: Belirli bir süre sonra otomatik olarak çözülen söz
• TimeOut: Belirli bir süre sonra otomatik olarak başarısız olan söz.
• Döngü: Olayları Promise sözdizimi ile yönetmek için yeniden tetiklenebilir vaat

• Kuyruk: Promise zincirine dayalı yürütme kuyruğu.

  rp = require("repeatable-promise")

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

Bunun için küçük bir kitap yazdım. https://www.npmjs.com/package/@inf3rno/promise.exposed

Diğerleri yazdı fabrika yöntemi yaklaşımı kullanılır, ama ben overrode then, catch, finallyyöntemleri de, bu yüzden sıra bu orjinal sözünü çözebilirsiniz.

Dışardan icracı olmadan sözü çözme:

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

İcracı setiyle yarışmak Dışarıdan zaman aşımı:

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);

Genel ad alanını kirletmek istemiyorsanız çakışma yok modu vardır:

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

Bunun manual-promiseyerine bir damla işlevi gören bir kütüphane yaptım Promise. Buradaki diğer cevapların hiçbiri Promisevekil veya sargı kullandıkları için değiştirmelerde düşüş olarak çalışmaz .

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

Reddetmeyi kaçırmak ve geri vermek için bir işlev oluşturmaya ne dersiniz?

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();

Bu işi yapan bir özeti bir araya getirdim: https://gist.github.com/thiagoh/c24310b562d50a14f3e7602a82b4ef13

nasıl kullanacağınız aşağıda açıklanmıştır:

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();
  });
  ...
});

önce tarayıcıda veya düğümde --allow-natives-sözdizimini etkinleştir

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

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

Promise'i dışarıdan çözmek için başka bir çözüm

 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 }
    }

kullanım

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