javascript - 对象键 'undefined'

标签 javascript arrays api object axios

我从 API 获取了一个对象,我正在使用其他 API 响应在其中创建新对象,例如:

API 响应 1:Obj: {a: 1, b: 2}

API 响应 2:3

创建对象:Obj.c = 3

最终结果:Obj: {a: 1, b: 2, c: 3}

问题:

console.log(Obj) return Obj: {a: 1, b: 2, c: 3}

console.log(Obj.c) return undefined

在属性中的 .map 之后尝试提供 console.log 时我没有得到,我无法访问创建的属性,返回 undefined 。但是,当我在任何对象上提供 console.log 时,创建的属性都在那里。

我的代码:

async getGeneralInfo(token, seed) {
    try {
        API_HEADER.headers.Authorization = token;
        let responseAvaliableCoins = await axios.get(
            BASE_URL + "/coin",
            API_HEADER
        );

        let avaliableCoins = responseAvaliableCoins.data.data.coins;

        avaliableCoins.map(async (coin, index) => {
            if (coin.status === "active") {
                let responseCreateAddress = await axios.post(
                    BASE_URL + "/coin/" + coin.abbreviation + "/address",
                    { seed },
                    API_HEADER
                );

                avaliableCoins[index].address =
                    responseCreateAddress.data.data.address;

                let responseBalance = await axios.get(
                    BASE_URL +
                    "/coin/" +
                    coin.abbreviation +
                    "/balance/" +
                    coin.address,
                    API_HEADER
                );

                avaliableCoins.token = responseBalance.headers[HEADER_RESPONSE];
                avaliableCoins[index].balance = responseBalance.data.data;
            } else {
                avaliableCoins[index].address = undefined;
                avaliableCoins[index].balance = undefined;
            }
        });

        console.warn(avaliableCoins[0].balance); //undefined
        console.warn(avaliableCoins[0]["balance"]); //undefined
        console.warn(avaliableCoins[0].address); //undefined
        console.warn(avaliableCoins[0]["address"]); //undefined

        console.warn("avaliableCoins", avaliableCoins); //All objects are here
        console.warn("avaliableCoins[0]", avaliableCoins[0]); //All objects are here

        return avaliableCoins;
    } catch (error) {
        internalServerError();
        return;
    }
}

更新 ----- enter image description here

最佳答案

map 中使用的函数是异步的。

现在 map 正在所有硬币上调用,在所有异步数据返回之前,代码已经转移到 console.warn()电话。

availableCoins 最终会在返回时使用所有异步数据进行更新,但这里存在竞争条件,因为代码并未明确等待这种情况发生。

这里是推荐的方法:

  • map 中的每个 async 调用返回修改后的项目,这将返回一个 Promise,当 async 函数完成。
  • 使用 Promise.all() 等待 Promise 的数组>
  • 返回结果数组

这是一个演示该方法的简化版本:

const getData = () => {
  return Promise.resolve('data');
}

export const getGeneralInfo = async () => {
  let avaliableCoins = [
    { a: 1 },
    { a: 2 }
  ]

  const promises = avaliableCoins.map(async (coin) => {
    let response = await getData();
    // modify coin and return it
    coin.data = response;
    return coin;
  });

  const updatedCoins = await Promise.all(promises);

  console.log(updatedCoins); // [{a: 1, data: 'data'}, {a: 2, data: 'data'}]

  return updatedCoins;
}

你修改后的函数看起来像这样:

async getGeneralInfo(token, seed) {
  try {
    API_HEADER.headers.Authorization = token;
    let responseAvaliableCoins = await axios.get(
      BASE_URL + "/coin",
      API_HEADER
    );

    let avaliableCoins = responseAvaliableCoins.data.data.coins;

    const promises = avaliableCoins.map(async (coin) => {
      if (coin.status === "active") {
        let responseCreateAddress = await axios.post(
          BASE_URL + "/coin/" + coin.abbreviation + "/address",
          { seed },
          API_HEADER
        );

        coin.address =
          responseCreateAddress.data.data.address;

        let responseBalance = await axios.get(
          BASE_URL +
          "/coin/" +
          coin.abbreviation +
          "/balance/" +
          coin.address,
          API_HEADER
        );

        coin.token = responseBalance.headers[HEADER_RESPONSE];
        coin.balance = responseBalance.data.data;
      } else {
        coin.address = undefined;
        coin.balance = undefined;
      }
      return coin;
    });

    availableCoins = await Promise.all(promises);

    console.warn(avaliableCoins[0].balance); //undefined
    console.warn(avaliableCoins[0]["balance"]); //undefined
    console.warn(avaliableCoins[0].address); //undefined
    console.warn(avaliableCoins[0]["address"]); //undefined

    console.warn("avaliableCoins", avaliableCoins); //All objects are here
    console.warn("avaliableCoins[0]", avaliableCoins[0]); //All objects are here

    return avaliableCoins;
  } catch (error) {
    internalServerError();
    return;
  }
}

关于javascript - 对象键 'undefined',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51805195/

相关文章:

ios - 尝试使用 for 循环并将其替换为某个值

c - 如何为二维数组动态分配连续的内存块

api - 如何使用 Golang 的 github.com/google/google-api-go-client/customsearch/v1

android - 在 Android API 10 中实现横向导航

javascript - 如何更改 Liferay 6.2 站点导航折叠行为?

php - 查询数据库onchange of dropdown menu,然后输出到form

javascript - jQuery 图表 - 更改 y 轴的标签(刻度)

javascript - 如何用 JavaScript 文字表示法创建关联数组

java - Transport.send(message) 在下面的代码中不起作用..netbeans 卡在了运行部分。它不会继续下去..它永远卡在那里

c# - 如何使用 Javascript 更改 ASP.NET Gridview 的 cssClass?