异步函数，promise

Question

这是我开始学习回调和承诺的非常小的代码。这里的问题是使用异步函数等待。但它不等待返回。将值打印为未定义。

import React from 'react';

export default function App () {


  function generaterandomNumber(){
    let promise = new Promise(function(resolve, reject) {
      setTimeout(() => {
        var Number=Math.floor(Math.random() * 10);
        if(Number % 2 === 0){
          console.log("resolve")
          resolve(Number)
          return Number;
        }else{
          reject("Odd")
        }
      }, 500);
    });
  }
  

 
  async function handleClick(event){
    console.log("Before")
    var x = await generaterandomNumber();
    console.log(x)
    console.log("After")
    event.preventDefault();
  }

  

    return (
      <div style={{textAlign: 'center'}}>
        <h1>Random Number generator</h1>
        <button onClick={handleClick}>Generate</button>
      </div>
    );
  
}

如果你知道关于回调、异步函数、promise 的优秀视频或文档资料，请告诉我，因为我对这些回调并不清楚

Answer 1

var x = await generaterandomNumber();

您正在等待generaterandomNumber的返回值

去仔细看看函数。

它没有return 语句，所以它返回undefined。

你在其中创建了一个 Promise，但你没有返回它。

Answer 2

你必须返回 Promise 对象。

等待承诺工作 编辑

 function generaterandomNumber(){
        return new Promise(function(resolve, reject) {
          setTimeout(() => {
            var Number=Math.floor(Math.random() * 10);
            if(Number % 2 === 0){
              console.log("resolve")
              resolve(Number)
              return Number;
            }else{
              reject("Odd")
            }
          }, 500);
        });
      }

https://javascript.info/async