JS等待无法正常工作

Question

It's my first time working with async js, and it doesn't work as expected.

Here is a simple form of the problematic code:

 let input = document.querySelector( '#test' ); document.querySelector( '#btn' ).addEventListener( 'click', getIP ); document.querySelector( '#btn-2' ).addEventListener( 'click', test ); async function test() { let value = input.value; if ( !value ) { await getIP(); value = input.value; } alert( value ); // do something with `value` } function getIP() { fetch( 'https://httpbin.org/get' ).then( res => { return res.json(); }).then( json => { input.value = json.origin }); } 

 <input id="test" type="text" /> <input type="button" id="btn" value="load" /> <input type="button" id="btn-2" value="execute something" /> 

This code is suppose to let the user to load their IP into the box, and then other buttons ( which are not shown in this example ) can execute actions using this IP.

However, there is a button ( #btn-2 ) which executes a single action using the IP.

The problem is that I wanna let the users to execute the action of #btn-2 immediately, without clicking the load button.

How can I make it work?

Answer 1

You actually just need a Promise from getIp :

 function getIP() {
   return fetch( 'https://httpbin.org/get' )
     .then(res => res.json());
 }

Then it is as easy as:

  async function test(){
     input.value = input.value || await getIP();    
  }