Javascript 如何使异步函数返回.map？

我试图让

fetchIDFromPerson

函数返回，并在执行

fetchPersons

函数的其余部分之前将返回的值分配给

ID

。由于它是异步的，所以只返回未定义的。我能做些什么让它工作？ 谢谢

---

为了正确使用异步代码返回的承诺，您需要进行一些更改：

return

axios在

fetchIDFromPerson（）

中向调用者承诺

记录后在

.catch（）中重新显示错误，以便调用方看到错误

return

return SWAPIGraphQL.post（）在

fetchPersons（）

中向调用方承诺

去掉

主体

变量。您不需要副作用编程，特别是异步代码。通过返回的承诺传达返回的结果

对

.map（）

的结果使用

Promise.all（）

调用

fetchPersons（）

时，使用返回的承诺获取解析值

在

.map（）

中，从

fetchIDFromPerson（）

返回承诺

将

.then（）

添加到调用

fetchIDFromPerson（）

的位置，在那里可以返回包含person和ID的组合数据结构

将

response.data.results[0].url

更改为

response.results[0].url

，以匹配要返回的数据结构

以下是固定代码：

const fetchIDFromPerson = name => {
  return axios
    .get(`https://swapi.co/api/people/?search=${name}&format=json`)
    .then(response => extractImgIDFromURL(response.results[0].url))
    .catch(error => {
        // log and rethrow
        console.error(error);
        throw error;
    });
};


const fetchPersons = (query, imgID) => {
  return SWAPIGraphQL.post("", { query })
    .then(result => {
      const { allPersons } = result.data.data;
      return Promise.all(allPersons.map(person => {
        return fetchIDFromPerson(person.name).then(ID => {
            return {
              ...person,
               imgID: ID
            };
        });
      }));
    })
    .catch(error => {
        // log error and rethrow
        console.error(error);
        throw error;
    });
};

fetchPersons(GET_PERSONS_DATA).then(results => {
    console.log(results);
}).catch(err => {
    console.log(err);
});

您可以使用

async/await

稍微简化

fetchPersons（）

，而不需要将错误记录在多个单独的位置：

const fetchPersons = async (query, imgID) => {
    const result = await SWAPIGraphQL.post("", { query });
    const { allPersons } = result.data.data;
    return Promise.all(allPersons.map(async (person) => {
        const ID = await fetchIDFromPerson(person.name);
        return {
          ...person,
           imgID: ID
        };
    }));
};

---

“它只返回未定义，因为它是异步的。”-不，它返回

未定义

，因为您忘记了

返回

您正在创建的承诺。（在

fetchPersons

中相同，顺便说一句）检查。检查，检查，检查，检查，检查。可能会添加“#删除只在以后记录时才重新调用的

捕获项”和“#使用async/await简化”：-@Bergi-是的，我正在考虑使用
async/await
添加简化版本。可能会在一点时间内完成。添加了简化的
async/await
实现。@jfriend00感谢您的清理。我仍然遇到“无法读取未定义的属性“url”的问题。在
fetchIDFromPerson
返回之前，我似乎无法获取该url值。@AleksandarZdravkovski-好吧，如果这是来自
extractImgIDFromURL（response.data.results[0].url）
，那么该数据结构或您引用它的方式有问题。你必须自己调试。从
console.log（response）
和
console.log（response.data）
开始，然后深入研究数据结构，看看您的工作进展如何。如果这两个看起来正确，那么添加
console.log（response.data.results）
，如果这看起来正确，那么添加
console.log（response.data.results[0]）
，但到那时，您可能会看到哪里出了问题。
const fetchPersons = async (query, imgID) => {
    const result = await SWAPIGraphQL.post("", { query });
    const { allPersons } = result.data.data;
    return Promise.all(allPersons.map(async (person) => {
        const ID = await fetchIDFromPerson(person.name);
        return {
          ...person,
           imgID: ID
        };
    }));
};