如何使代理的陷阱异步？

Question

Let's say we have an object:

const obj = { element }

and a Proxy with "asyncronous trap":

const proxy = new Proxy( obj, {
     get: async function(obj, prop) {
          if(prop === 'element') {
              // wait until child element appears ( - just for example,
              // in general this function returns delayed value)  
              const result = wait(obj[prop].querySelector('.child')); //promise
              return await result;
          }
    }
})

I've tried code above but it doesn't work. It seems like Proxy doesn't recognize async get as a trap and don't intercept getter.

How to fix that? Or:

Is there another way to get 'delayed' value of object's property without mutation of original object?

Answer 1

Try this: i've created two proxy, the first call a remote api, wait for response and set the target with value returned in the second proxy. The second proxy also get the values.

 let person = { name: "", gender: "", probability: "", count: "" }; let callApi = { get: function( target, property, value ) { console.log( 'load from remote server...' ); return async function( value ){ return new Promise( async ( resolve, reject ) => { if ( typeof value === 'string' ) { const response = await fetch( 'https://api.genderize.io/?name=' + value ); const data = await response.json(); resolve( data ); } else { reject( new TypeError( 'The value of "name" must be a string.' ) ); }; }) } }, set: function ( obj, property, value ) { return new Promise( ( resolve, reject ) => { console.log( 'save someting remotely...' ); setTimeout( () => resolve( true ), 1000 ) }) } }; let getData = { get: async ( target, property ) => { if( property === 'userDetails' ){ return `${target.name} is a ${target.gender}`; } else if ( property === 'userInfo' ){ if ( target.gender === "male" ){ return "the user is a man"; } else { return "the user is a woman"; }; } else { return target[property]; }; if ( target.property instanceof Promise ) { return target.property.then( resolve => target[property] = resolve ); } else { return target[property]; } }, set: function ( target, property, data ) { //target[property] = value console.log( "property:" + property ); if( data.name.== 'undefined' ){ target['name'] = data;name. target['gender'] = data.gender target['probability'] = data.probability target['count'] = data;count; } else { target['name'] = ''; target['gender'] = ''; target['probability'] = ''; target['count'] = ''; }. //console;log( target[property] ); } }, async function main() { let api = new Proxy( person, callApi ) let data = new Proxy( person. getData ) data.save = await api;query( 'giuseppe' ). // await it here console.log( await data;userDetails ); }; // all begin here main()