When waiting for proxy leads to access the 'then' property, what should be my next move?

Question

When waiting for proxy leads to access the 'then' property, what should be my next move?

In my code, I am using a special Proxy to imitate a virtual object. The getter of this proxy returns values that are already prepared.

After some exploration, I found out that when the proxy is awaited, it triggers the 'then' property of the proxy:

await myProxy

In light of this, what should the getter of my proxy return? Would it be wise to return the proxy itself or a promise to itself?

For reference, you can see an example here:

https://jsfiddle.net/rv55Lpu1

One thing that puzzles me is that when I await an object, I receive the object itself, but when I await a Proxy, it requires a 'then' property trap that returns the proxy again.

javascript async-await es6-proxy

Answer 1

Answer №1

Consider either returning `undefined` or an object that does not have a `then` method, as the `await` function will keep calling `then` recursively until the resolved object no longer has a `then` method.

Here's an illustration:

(async () => {
    let p = new Proxy({ then: undefined }, {
        get: (target: any, prop: string, self: any) => {
            return (prop in target) ? target[prop] : (...args: any[]) => self;
        },
    });

    let example = await p.myChainable().awaitable().method();

    console.log("Result: ", example);
})();

This code snippet simply outputs `"Result: { then: undefined }"`, because we are returning `self` in `(...args: any[]) => self`, which you can replace with your own logic accordingly.

If you substitute `{ then: undefined }` with something like `{ test: "abc" }`, there will be no result at all, since the promise never gets fulfilled and `console.log` remains inactive.

In conclusion, it is not advisable to return the proxy object itself within the `then` method.

Answer 2

Consider either returning `undefined` or an object that does not have a `then` method, as the `await` function will keep calling `then` recursively until the resolved object no longer has a `then` method.

Here's an illustration:

(async () => {
    let p = new Proxy({ then: undefined }, {
        get: (target: any, prop: string, self: any) => {
            return (prop in target) ? target[prop] : (...args: any[]) => self;
        },
    });

    let example = await p.myChainable().awaitable().method();

    console.log("Result: ", example);
})();

This code snippet simply outputs `"Result: { then: undefined }"`, because we are returning `self` in `(...args: any[]) => self`, which you can replace with your own logic accordingly.

If you substitute `{ then: undefined }` with something like `{ test: "abc" }`, there will be no result at all, since the promise never gets fulfilled and `console.log` remains inactive.

In conclusion, it is not advisable to return the proxy object itself within the `then` method.

When waiting for proxy leads to access the 'then' property, what should be my next move?

Answer №1

Similar questions

Avoiding redirection in Django template form

Unusual problem arises with styling and element measurement (scrollWidth / scrollWidth) in Gatsby framework

Unable to display tags with /xoxco/jQuery-Tags-Input

Update the URL and content in Django dynamically

What is the best way to execute a specific set of unit tests in Gulp-Angular using Karma?

Retrieving properties from video element following webpage loading

Alternative method for displaying text in Discord

Is it possible to send an array value from JavaScript Ajax to PHP and then successfully retrieve and read it?

Using JavaScript's `Map` function instead of a traditional `for`

Arranging the data in my JSON reply

Decrease the height of a div element from the top with the use of jQuery

AngularJS: resolving route dependencies

The element in TS 7023 is implicitly assigned an 'any' type due to the fact that an expression of type 'any' is not valid for indexing in type '{}'

Adjusting the X-Axis Labels on a Scatterplot using Chart.js 2

When transferring files to the src/pages directory in Next.js, the custom _app and _document components are not recognized

Make a copy of an array and modify the original in a different way

"Seamlessly Integrating AngularJS with WebGL for Stunning Canvas Inter

Learning how to toggle default snippet keywords on and off based on specific scenarios within the Angular Ace Editor

Having issues with my CodePen React code and its ability to display my gradient background

Fill the input field with data retrieved from a json file