JS等待无法正常工作

Question

这是我第一次使用异步js，它没有按预期工作。

这是有问题的代码的一种简单形式：

 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" /> 

假设此代码允许用户将其IP加载到框中，然后其他按钮（在此示例中未显示）可以使用此IP执行操作。

但是，有一个按钮（ #btn-2 ）使用IP执行单个操作。

问题是我想让用户立即执行#btn-2的操作，而无需单击load按钮。

我该如何运作？

Answer 1

您实际上只需要getIp的Promise getIp ：

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

然后就这么简单：

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