React中调用导入的async异步函数未按预期异步执行问题

问题根因 #

你的getNFT函数虽然声明了async，但内部并没有正确返回等待setTimeout执行完成的Promise：

• async函数默认会返回一个Promise对象，但你在函数内部没有主动控制Promise的决议时机，setTimeout的回调是异步执行的，回调里的return nft仅作用于setTimeout的回调函数本身，不会作为外层getNFT的返回值
• 当你调用getNFT时，函数会立即执行完所有同步代码，直接返回状态为fulfilled、值为undefined的Promise，因此await拿到的结果就是undefined，2秒后setTimeout的回调才会执行，打印对应日志。

修复方案 #

修改interact.js中的getNFT函数，手动包装Promise来控制异步逻辑的决议时机：

export const getNFT = () => {
  // 返回一个自定义Promise，等待setTimeout执行完成后resolve结果
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('getNFT code execute');
      resolve(nft); // 用resolve抛出异步结果，而不是return
    }, 2000);
  })
};

const nft = {
tokenURI: 'https://gateway.pinata.cloud/ipfs/QmdxQFWzBJmtSvrJXp75UNUaoVMDH49g43WsL1YEyb',
imageURL: 'https://gateway.pinata.cloud/ipfs/QmeMTHnqdfpUcRVJBRJ4GQ2XHU2ruVrdJqZhLz',
ID: '212'
};

修改后await getNFT()就能正常拿到nft对象，执行顺序也会符合预期：等待2秒先输出getNFT code execute，再输出接口返回的nft数据。

内容的提问来源于stack exchange，提问作者johnDoe