如何在反应中使用 async-await 释放 Promise答案

【问题标题】：How release Promise pending with async-await in react如何在反应中使用 async-await 释放 Promise
【发布时间】：2021-10-12 15:58:45
【问题描述】：

我的代码：

const attList = async (areaCode, cityCode) => {
    const url = `http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=${serviceKey}&contentTypeId=12&areaCode=${areaCode}&numOfRows=40&sigunguCode=${cityCode}&MobileOS=ETC&MobileApp=AppTest`;
    try {
        const {data:res} = await axios.get(url)
        const list = res.response.body.items.item;
        return list
    } catch (err) {
        console.log(err);
    }
}

console.log(attList(1, 1))

在控制台上：

PromiseResult 没问题，但不知道如何从 Promise 中释放 PromiseResult{}

【问题讨论】：

console.log(attList(1, 1)) -----> attList(1, 1).then(data => console.log(data))。您还应该抛出来自attList 函数的catch 块的错误：console.log(err); ----> throw error;。或者，您可以删除 try-catch 块并在调用此函数的代码中添加 catch 方法：attList(1, 1).then(data => console.log(data)).catch(...)
您的attList 函数返回一个Promise，为了使用它，您需要在异步代码中使用await，或者在同步代码中使用.then() 链接。
attList 是异步函数，所以你可以等到 promise 完成后使用 const result = await attList(1, 1) 或 await attList(1,1).then(result => {...}) 得到它的结果

标签： javascript reactjs async-await openapi

【解决方案1】：

异步函数总是返回一个承诺。如果异步函数的返回值不是明确的承诺，它将被隐式包装在承诺中。注意：即使异步函数的返回值表现得好像它被包装在 Promise 中一样。解决，它们是不等价的。

const attList = async (areaCode, cityCode, serviceKey) => {
  const url = `http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=${serviceKey}&contentTypeId=12&areaCode=${areaCode}&numOfRows=40&sigunguCode=${cityCode}&MobileOS=ETC&MobileApp=AppTest`;

  const _url = 'https://jsonplaceholder.typicode.com/todos/1';

  try {
    const data = await axios.get(url);
    console.log(data);
  } catch (err) {
    console.log(err);
  }
};

attList(1, 1, null);

您没有定义 serviceKey，因此我无法使用您的 URL 对其进行测试，但我向您保证语法很好。

【讨论】：