異步函數，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

您必須返回 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

Answer 2

var x = await generaterandomNumber();

您正在等待generaterandomNumber的返回值

去仔細看看函數。

它沒有return語句，所以它返回undefined 。

你在其中創建了一個 Promise，但你沒有返回它。