Menguasai pembatalan janji dalam JavaScript

Ditulis oleh Rosario De Chiara✏️

Dalam JavaScript, Promises ialah alat yang berkuasa untuk mengendalikan operasi tak segerak, terutamanya berguna dalam acara berkaitan UI. Ia mewakili nilai yang mungkin tidak tersedia serta-merta tetapi akan diselesaikan pada satu ketika pada masa hadapan.

Janji membenarkan (atau harus membenarkan) pembangun menulis kod yang lebih bersih dan lebih terurus apabila menangani tugas seperti panggilan API, interaksi pengguna atau animasi. Dengan menggunakan kaedah seperti .then(), .catch(), dan .finally(), Promises membolehkan cara yang lebih intuitif untuk mengendalikan senario kejayaan dan ralat, mengelakkan "neraka panggilan balik" yang terkenal.

Dalam artikel ini, kami akan menggunakan kaedah baharu (Mac 2024 Promise.withResolvers() yang membolehkan anda menulis kod yang lebih bersih dan ringkas dengan mengembalikan objek yang mengandungi tiga perkara: Promise baharu dan dua fungsi, satu untuk menyelesaikan Promise dan satu lagi untuk menolaknya. Memandangkan ini adalah kemas kini terbaharu, anda memerlukan masa jalan Node terkini (v>22) untuk melaksanakan contoh dalam artikel ini.

Membandingkan kaedah janji JavaScript lama dan baharu

Dalam dua bahagian kod yang setara dengan fungsi berikut, kita boleh membandingkan pendekatan lama dan pendekatan baharu untuk menetapkan kaedah untuk sama ada menyelesaikan atau menolak Janji:

let resolve, reject;

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

Math.random() > 0.5 ? resolve("ok") : reject("not ok");

Dalam kod di atas, anda boleh melihat penggunaan Promise yang paling tradisional: anda membuat instantiate objek janji baharu, dan kemudian, dalam pembina, anda perlu menetapkan dua fungsi, menyelesaikan dan menolak, yang akan digunakan apabila diperlukan.

Dalam coretan kod berikut, bahagian kod yang sama telah ditulis semula dengan kaedah Promise.withResolvers() baharu dan ia kelihatan lebih mudah:

const { promise, resolve, reject } = Promise.withResolvers();

Math.random() > 0.5 ? resolve("ok") : reject("not ok");

Di sini anda boleh melihat cara pendekatan baharu itu berfungsi. Ia mengembalikan Janji, di mana anda boleh menggunakan kaedah .then() dan dua fungsi, selesaikan dan tolak.

Pendekatan tradisional untuk Promises merangkum penciptaan dan logik pengendalian peristiwa dalam satu fungsi, yang boleh mengehadkan jika berbilang syarat atau bahagian kod yang berbeza perlu menyelesaikan atau menolak janji.

Sebaliknya, Promise.withResolvers() memberikan fleksibiliti yang lebih besar dengan memisahkan penciptaan Promise daripada logik resolusi, menjadikannya sesuai untuk mengurus keadaan yang kompleks atau berbilang peristiwa. Walau bagaimanapun, untuk kes penggunaan mudah, kaedah tradisional mungkin lebih mudah dan lebih biasa bagi mereka yang terbiasa dengan corak janji standard.

Contoh dunia nyata: Memanggil API

Kami kini boleh menguji pendekatan baharu pada contoh yang lebih realistik. Dalam kod di bawah, anda boleh melihat contoh mudah seruan API:

function fetchData(url) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                // Check if the response is okay (status 200-299)
                if (response.ok) {
                    return response.json(); // Parse JSON if response is okay
                } else {
                    // Reject the promise if the response is not okay
                    reject(new Error('API Invocation failed'));
                }
            })
            .then(data => {
                // Resolve the promise with the data
                resolve(data);
            })
            .catch(error => {
                // Catch and reject the promise if there is a network error
                reject(error);
            });
    });
}

// Example usage
const apiURL = '<ADD HERE YOU API ENDPOINT>';

fetchData(apiURL)
    .then(data => {
        // Handle the resolved data
        console.log('Data received:', data);
    })
    .catch(error => {
        // Handle any errors that occurred
        console.error('Error occurred:', error);
    });

Fungsi fetchData direka untuk mengambil URL dan mengembalikan Janji yang mengendalikan panggilan API menggunakan API pengambilan. Ia memproses respons dengan menyemak sama ada status respons berada dalam julat 200-299, menunjukkan kejayaan.

Jika berjaya, respons dihuraikan sebagai JSON, dan Janji diselesaikan dengan data yang terhasil. Jika respons tidak berjaya, Janji ditolak dengan mesej ralat yang sesuai. Selain itu, fungsi ini termasuk pengendalian ralat untuk menangkap sebarang ralat rangkaian, menolak Janji jika ralat sedemikian berlaku.

Contoh menunjukkan cara menggunakan fungsi ini, menunjukkan cara mengurus data yang diselesaikan dengan blok .then() dan mengendalikan ralat menggunakan blok .catch(), memastikan pengambilan data dan ralat yang berjaya diuruskan dengan sewajarnya.

Dalam kod di bawah, kami menulis semula fungsi fetchData() dengan menggunakan kaedah Promise.withResolvers() baharu:

function fetchData(url) {
    const { promise, resolve, reject } = Promise.withResolvers();

    fetch(url)
        .then(response => {
            // Check if the response is okay (status 200-299)
            if (response.ok) {
                return response.json(); // Parse JSON if response is okay
            } else {
                // Reject the promise if the response is not okay
                reject(new Error('API Invocation failed'));
            }
        })
        .then(data => {
            // Resolve the promise with the data
            resolve(data);
        })
        .catch(error => {
            // Catch and reject the promise if there is a network error
            reject(error);
        });

    return promise;
}

Seperti yang anda lihat, kod di atas lebih mudah dibaca dan peranan objek Promise adalah jelas: fungsi fetchData akan mengembalikan Promise yang akan berjaya diselesaikan atau akan gagal, menggunakan – dalam setiap kes – kaedah yang betul . Anda boleh menemui kod di atas pada repositori bernama api.invocation.{old|new}.js.

Janji pembatalan

Kod berikut meneroka cara melaksanakan kaedah pembatalan Janji. Seperti yang anda ketahui, anda tidak boleh membatalkan Janji dalam JavaScript. Janji mewakili hasil operasi tak segerak dan ia direka untuk menyelesaikan atau menolak sebaik sahaja dibuat, tanpa mekanisme terbina dalam untuk membatalkannya.

Batasan ini timbul kerana Janji mempunyai proses peralihan keadaan yang ditentukan; mereka bermula sebagai belum selesai dan, setelah diselesaikan, tidak boleh menukar keadaan. Mereka bertujuan untuk merangkum hasil operasi dan bukannya mengawal operasi itu sendiri, yang bermaksud mereka tidak boleh mempengaruhi atau membatalkan proses asas. Pilihan reka bentuk ini menjadikan Promises mudah dan tertumpu pada mewakili hasil akhirnya operasi:

const cancellablePromise = () => {
    const { promise, resolve, reject } = Promise.withResolvers();

    promise.cancel = () => {
        reject("the promise got cancelled");
    };
    return promise;
};

In the code above, you can see the object named cancellablePromise, which is a promise with an additional cancel() method that, as you can see, simply forces the invocation of the reject method. This is just syntactic sugar and does not cancel a JavaScript Promise, though it may help in writing clearer code.

An alternative approach is to use an AbortController and AbortSignal, which can be tied to the underlying operation (e.g., an HTTP request) to cancel it when needed. From the documentation, you can see that the AbortController and AbortSignal approach is a more expressive implementation of what we implemented in the code above: once the AbortSignal is invoked, the promise just gets rejected.

Another approach is to use reactive programming libraries like RxJS, which offers an implementation of the Observable pattern, a more sophisticated control over async data streams, including cancellation capabilities.

A comparison between Observables and Promises

When speaking about practical use cases, Promises are well-suited for handling single asynchronous operations, such as fetching data from an API. In contrast, Observables are ideal for managing streams of data, such as user input, WebSocket events, or HTTP responses, where multiple values may be emitted over time.

We already clarified that once initiated, Promises cannot be canceled, whereas Observables allow for cancellation by unsubscribing from the stream. The general idea is that, with Observables, you have an explicit structure of the possible interaction with the object:

• You create an Observable, and then all the Observables can subscribe to it
• The Observable carries out its work, changing state and emitting events. All the Observers will receive the updates – this is the main difference with Promises. A Promise can be resolved just once while the Observables can keep emitting events as long as there are Observers
• Once the Observer is not interested in the events from the Observables, it can unsubscribe, freeing resources

This is demonstrated in the code below:

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

const observer = observable.subscribe({
  next(x) { console.log('Received value:', x); },
  complete() { console.log('Observable completed'); }
});

observer.unsubscribe();

This code cannot be rewritten with Promises because the Observable returns three values while a Promise can only be resolved once.

To experiment further with the unsubscribe method, we can add another Observer that will use the takeWhile() method: it will let the Observer wait for values to match a specific condition; in the code below, for example, it keeps receiving events from the Observable while the value is not 2:

import { Observable, takeWhile } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

const observer1 = observable.subscribe({
  next(x) { console.log('Received by 1 value:', x); },
  complete() { console.log('Observable 1 completed'); }
});

const observer2 = observable.pipe(
  takeWhile(value => value != "2")
).subscribe(value => console.log('Received by 2 value:', value));

In the code above, observer1 is the same as we have already seen: it will just subscribe and keep receiving all the events from the Observable. The second one, observer2, will receive elements from the Observable while the condition is matched. In this case, this means when the value is different from 2.

From the execution, you can see how the two different mechanisms work:

$ node observable.mjs
Received by 1 value: 1
Received by 1 value: 2
Received by 1 value: 3
Observable 1 completed
Received by 2 value: 1
$

Conclusion

In this article, we investigated the new mechanism to allocate a Promise in JavaScript and laid out some of the possible ways to cancel a Promise before its completion. We also compared Promises with Observable objects, which not only offer the features of Promises but extend them by allowing multiple emissions of events and a proper mechanism for unsubscribing.

---

LogRocket: Debug JavaScript errors more easily by understanding the context

Debugging code is always a tedious task. But the more you understand your errors, the easier it is to fix them.

LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to see exactly what the user did that led to an error.

LogRocket records console logs, page load times, stack traces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

Try it for free.

Atas ialah kandungan terperinci Menguasai pembatalan janji dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!