如何 return Jquery 中对象承诺的值

Question

我正在尝试 return Promises 对象的值，这些值打印在控制台中，但是当我在 HTML 上显示它时，它显示“OBJECT PROMISE”代替 returned 值。我的密码是

const priceConversion = async(data) =>{
    const url = 'http://www.geoplugin.net/json.gp?'
    const response = await  fetch (url)
    const resJSON = await response.json()
    const val =  resJSON['geoplugin_currencySymbol'] + Math.round(data * resJSON['geoplugin_currencyConverter'])
    return val
    
  }

这里val returned的类型是String。但是一旦从对象调用它，它就会给出上述输出，即“Object Promise” 对象的代码是

  let price = {
      basic:{
          monthly: priceConversion(0),
          annual:priceConversion(0)
        },
        standard:{
            monthly:priceConversion(9),
            annual:priceConversion(4.5),
        },
        premium:{
            monthly:priceConversion(17),
            annual:priceConversion(7)
        }
    }

对于文档操作，我使用以下方法

let monthly = true
if (monthly === true){
    $("#freeMonthly").empty().text(`${price.basic.monthly}`)
    $("#standardMonthly").empty().text(`${price.standard.monthly}`)
    $("#premiumMonthly").empty().text(`${price.premium.monthly}`)
}

如果有人可以帮助解决这个问题，那就太好了，因为我找不到任何可以解决此问题的解决方案。谢谢！

Answer 1

尝试将所有内容包装在 async 函数中，并在每次调用函数时使用 await：

const priceConversion = async(data) => {
  const url = 'http://www.geoplugin.net/json.gp?'
  const response = await fetch(url)
  const resJSON = await response.json()
  const val = resJSON['geoplugin_currencySymbol'] + Math.round(data * resJSON['geoplugin_currencyConverter'])
  return val

}

const calculatePrice = async() => {
  return {
    basic: {
      monthly: await priceConversion(0),
      annual: await priceConversion(0)
    },
    standard: {
      monthly: await priceConversion(9),
      annual: await priceConversion(4.5),
    },
    premium: {
      monthly: await priceConversion(17),
      annual: await priceConversion(7)
    }
  }

}


const main = async() => {
  try {
    console.log("In the main")

    const price = await calculatePrice()

    let monthly = true
    if (monthly === true) {
      $("#freeMonthly").empty().text(`${price.basic.monthly}`)
      $("#standardMonthly").empty().text(`${price.standard.monthly}`)
      $("#premiumMonthly").empty().text(`${price.premium.monthly}`)
    }
  } catch (err) {
    console.log(err)
  }




}

main()

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id="freeMonthly">freeMonthly</div>
  <div id="standardMonthly">standardMonthly</div>
  <div id="premiumMonthly">premiumMonthly</div>
</body>

</html>

如何 return Jquery 中对象承诺的值

How to return values from the Object Promise in Jquery

javascript

jquery

async-await

es6-promise