Selesaikan Javascript Promise di luar lingkup fungsi

Saya telah menggunakan ES6 Promise.

Biasanya, Janji dibuat dan digunakan seperti ini

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

Tetapi saya telah melakukan sesuatu seperti di bawah ini untuk mengambil tekad di luar demi fleksibilitas.

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

Dan kemudian

onClick = function(){
    outsideResolve();
}

Ini berfungsi dengan baik, tetapi apakah ada cara yang lebih mudah untuk melakukan ini? Jika tidak, apakah ini praktik yang baik?

Tidak, tidak ada cara lain untuk melakukan ini - satu-satunya hal yang dapat saya katakan adalah bahwa use case ini tidak terlalu umum. Seperti yang dikatakan Felix dalam komentar - apa yang Anda lakukan akan konsisten bekerja.

Perlu disebutkan bahwa alasan konstruktor janji berperilaku seperti ini adalah keselamatan lemparan - jika pengecualian yang tidak Anda antisipasi terjadi saat kode Anda berjalan di dalam konstruktor janji, maka akan berubah menjadi penolakan, bentuk keselamatan lemparan ini - mengubah kesalahan yang dilemparkan ke penolakan adalah penting dan membantu mempertahankan kode yang dapat diprediksi.

Untuk alasan keamanan lemparan ini, konstruktor janji dipilih lebih dari yang ditangguhkan (yang merupakan cara konstruksi janji alternatif yang memungkinkan apa yang Anda lakukan) - seperti untuk praktik terbaik - saya akan meneruskan elemen dan menggunakan konstruktor janji sebagai gantinya:

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

Untuk alasan ini - kapan pun Anda dapat menggunakan konstruktor janji daripada mengekspor fungsi - Saya sarankan Anda menggunakannya Setiap kali Anda dapat menghindari keduanya - hindari keduanya dan rantai.

Perhatikan, bahwa Anda tidak boleh menggunakan konstruktor janji untuk hal-hal seperti if(condition), contoh pertama dapat ditulis sebagai:

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

sederhana:

var promiseResolve, promiseReject;

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

promiseResolve();

Agak terlambat ke pesta di sini, tetapi cara lain untuk melakukannya adalah dengan menggunakan objek Ditangguhkan . Pada dasarnya Anda memiliki jumlah pelat yang sama, tetapi sangat berguna jika Anda ingin membagikannya dan mungkin menyelesaikannya di luar definisi mereka.

Implementasi Naif:

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

Versi ES5:

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

Solusi yang saya buat pada 2015 untuk kerangka kerja saya. Saya menyebut jenis janji ini Task

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

Saya suka jawaban @JonJaques tapi saya ingin melangkah lebih jauh.

Jika Anda mengikat thendan catchkemudian Deferredobjek, maka sepenuhnya mengimplementasikan PromiseAPI dan Anda dapat memperlakukannya sebagai janji dan awaititu dan semacamnya.

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

Metode pembantu akan meringankan overhead tambahan ini, dan memberi Anda perasaan jQuery yang sama.

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

Penggunaan akan

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

Yang mirip dengan jQuery

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

Meskipun, dalam kasus penggunaan ini sederhana, sintaksis asli baik-baik saja

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

Saya menggunakan fungsi pembantu untuk membuat apa yang saya sebut "janji datar" -

function flatPromise() {

    let resolve, reject;

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

    return { promise, resolve, reject };
}

Dan saya menggunakannya seperti itu -

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;

}

Lihat contoh kerja lengkap -

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

})();

Sunting: Saya telah membuat paket NPM yang disebut janji-datar dan kodenya juga tersedia di GitHub .

Anda bisa membungkus Janji dalam sebuah kelas.

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.

Banyak jawaban di sini mirip dengan contoh terakhir dalam artikel ini . Saya menyimpan banyak Janji, resolve()dan reject()fungsi dan dapat ditugaskan ke variabel atau properti apa pun. Hasilnya, saya dapat membuat kode ini sedikit lebih ringkas:

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

Berikut adalah contoh sederhana dari penggunaan versi ini defer()untuk menggabungkan FontFaceJanji beban dengan proses async lain:

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 

Pembaruan: 2 alternatif jika Anda ingin merangkum objek:

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

dan

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

Jawaban yang diterima salah. Ini cukup mudah menggunakan ruang lingkup dan referensi, meskipun mungkin membuat Janji puritan marah:

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

Kami pada dasarnya mengambil referensi ke fungsi ketetapan saat janji dibuat, dan kami mengembalikannya sehingga dapat diatur secara eksternal.

Dalam satu detik konsol akan menampilkan:

> foo

Ya kamu bisa. Dengan menggunakan CustomEventAPI untuk lingkungan browser. Dan menggunakan proyek acara emitor di lingkungan node.js. Karena cuplikan dalam pertanyaan adalah untuk lingkungan peramban, berikut adalah contoh yang berfungsi untuk hal yang sama.

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>

Semoga jawaban ini bermanfaat!

Solusi kami adalah menggunakan penutupan untuk menyimpan fungsi tekad / tolak dan juga lampirkan fungsi untuk memperpanjang janji itu sendiri.

Berikut polanya:

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

Dan menggunakannya:

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

Saya menemukan diri saya kehilangan pola ditangguhkan juga dalam kasus-kasus tertentu. Anda selalu dapat membuat satu di atas Janji ES6:

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

Terima kasih kepada semua orang yang memposting di utas ini. Saya membuat modul yang menyertakan objek Defer () yang dijelaskan sebelumnya serta beberapa objek lain yang dibangun di atasnya. Mereka semua memanfaatkan Janji dan sintaksis Panggilan balik yang rapi untuk mengimplementasikan komunikasi / penanganan acara dalam suatu program.

• Tunda: Janji yang bisa diselesaikan gagal dari jarak jauh (di luar tubuhnya)
• Penundaan: Janji yang diselesaikan secara otomatis setelah waktu tertentu
• TimeOut: Janji yang gagal secara otomatis setelah waktu tertentu.
• Siklus: Janji yang dapat dipicu kembali untuk mengelola acara dengan sintaksis Janji

• Antrian: Antrian eksekusi berdasarkan Chaining janji.

  rp = require("repeatable-promise")

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

Saya menulis lib kecil untuk ini. https://www.npmjs.com/package/@inf3rno/promise.exposed

Saya menggunakan pendekatan metode pabrik lain menulis, tapi saya mengesampingkan then, catch, finallymetode juga, sehingga Anda dapat menyelesaikan janji asli oleh mereka juga.

Menyelesaikan Janji tanpa pelaksana dari luar:

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

Balap dengan setTimeout pelaksana dari luar:

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

Ada mode tanpa konflik jika Anda tidak ingin mencemari namespace global:

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

Saya membuat perpustakaan bernama manual-promiseyang berfungsi sebagai pengganti Promise. Tidak ada jawaban lain di sini yang akan berfungsi sebagai pengganti pengganti Promise, karena mereka menggunakan proksi atau pembungkus.

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

Bagaimana dengan membuat fungsi untuk membajak tolak dan mengembalikannya?

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

Saya telah mengumpulkan inti yang melakukan pekerjaan itu: https://gist.github.com/thiagoh/c24310b562d50a14f3e7602a82b4ef13

inilah cara Anda harus menggunakannya:

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

pertama-tama aktifkan --allow-natives-syntax di browser atau node

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

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

Hanya solusi lain untuk menyelesaikan Janji dari luar

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

Pemakaian

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