异步功能，承诺

问题描述

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

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对象。

等待，保证工作编辑

 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

var x = await generaterandomNumber();

您正在等待generaterandomNumber的返回值

仔细查看该功能。

它没有return语句，因此它返回undefined。

您在其中创建了一个Promise，但没有将其退回。

asynccallback javascript