如何正确传递返回的变量值以在 async/await 函数中获取 api答案

【问题标题】：How to properly pass a returned variable value to fetch api within async/await function如何正确传递返回的变量值以在 async/await 函数中获取 api
【发布时间】：2021-12-01 03:37:12
【问题描述】：

我正在使用 vue 3，在我的组件中，我有一些函数可以通过 api 调用天气 api 和位置 api。我目前正在尝试根据邮政编码取回位置数据。我有一个单独的方法，它返回一个值（邮政编码）。我将该值作为参数传递给 api 调用，但每次请求失败时都会出现 400 代码，因为 postal_code 的值显示为空。如果我 console.log() 在 fetch() 调用之前返回的邮政编码，则该值会正确显示在我的控制台中。邮政编码的价值是否丢失了？

代码：

    async function getWeatherBasedOnCoordinate () {
      let response = {};
      console.log(await getZip()) //properly outputs zip code here

      response = await fetch(
          `${ baseWeatherApiUrl }?key=${ weatherApiKey }&postal_code=${await getZip()}&units=I`
      );

      return (await response.json());
    }

    async function getZip () {
      let allDataReturned = await convertCoordsToLocation();
      let featureData = allDataReturned.features;
      let specificLocation = '';

      featureData.forEach((locData, index) => {
        if (index === 0) {
          specificLocation = locData.context[0].text;
        }
      });

      return specificLocation;
    }

“网络”选项卡中显示的网址

https://api.weatherbit.io/v2.0/current?key={my-private-api-key}&postal_code=&units=I

如您所见，postal_code 为空。

编辑：更多信息

在getZip() 方法中，allDataReturned 看起来像这样：

{
    "type": "FeatureCollection",
    "query": [
        "825",
        "s",
        "milwaukee",
        "ave",
        "deerfield",
        "il",
        "60015"
    ],
    "features": [{
            "id": "address.4356035406756260",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 1,
            "properties": {},
            "text": "Milwaukee Ave",
            "place_name": "825 Milwaukee Ave, Deerfield, Illinois 60015, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Deerfield, Illinois 60015, United States",
            "center": [
                -87.921434,
                42.166602
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.921434,
                    42.166602
                ],
                "interpolated": true,
                "omitted": true
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.287187",
                    "text": "60015" //Pulling from here!
                },
                {
                    "id": "place.5958304312090910",
                    "wikidata": "Q287895",
                    "text": "Deerfield"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "address.7464624790403620",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 0.5,
            "properties": {},
            "text": "Milwaukee Ave",
            "place_name": "825 Milwaukee Ave, Wheeling, Illinois 60090, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Wheeling, Illinois 60090, United States",
            "center": [
                -87.910299,
                42.144504
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.910299,
                    42.144504
                ],
                "interpolated": true
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.287187",
                    "text": "Lake Cook Road"
                },
                {
                    "id": "postcode.9418633295906190",
                    "text": "60090"
                },
                {
                    "id": "place.9902190947082220",
                    "wikidata": "Q935043",
                    "text": "Wheeling"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "address.6472754353404224",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 0.5,
            "properties": {},
            "text": "Milwaukee Avenue",
            "place_name": "825 Milwaukee Avenue, Glenview, Illinois 60025, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Glenview, Illinois 60025, United States",
            "center": [
                -87.852677,
                42.071152
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.852677,
                    42.071152
                ]
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.275266",
                    "text": "Northfield Woods"
                },
                {
                    "id": "postcode.3787740186211610",
                    "text": "60025"
                },
                {
                    "id": "place.10211845459386970",
                    "wikidata": null,
                    "text": "Glenview"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "address.1225436500189372",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 0.5,
            "properties": {},
            "text": "Milwaukee Ave",
            "place_name": "825 Milwaukee Ave, Buffalo Grove, Illinois 60089, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Buffalo Grove, Illinois 60089, United States",
            "center": [
                -87.917484,
                42.158084
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.917484,
                    42.158084
                ],
                "interpolated": true
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.287187",
                    "text": "Lake Cook Road"
                },
                {
                    "id": "postcode.11727721238210580",
                    "text": "60089"
                },
                {
                    "id": "place.8589721255665070",
                    "wikidata": "Q967086",
                    "text": "Buffalo Grove"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "address.240107872738130",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 0.5,
            "properties": {},
            "text": "Milwaukee Avenue",
            "place_name": "825 Milwaukee Avenue, Wheeling, Illinois 60090, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Wheeling, Illinois 60090, United States",
            "center": [
                -87.898319,
                42.126289
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.898319,
                    42.126289
                ],
                "interpolated": true,
                "omitted": true
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.287189",
                    "text": "Milwaukee Avenue"
                },
                {
                    "id": "postcode.9418633295906190",
                    "text": "60090"
                },
                {
                    "id": "place.9902190947082220",
                    "wikidata": "Q935043",
                    "text": "Wheeling"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        }
    ],
    "attribution": "NOTICE: © 2018 Mapbox and its suppliers. All rights reserved. Use of this data is subject to the Mapbox Terms of Service (https://www.mapbox.com/about/maps/). This response and the information it contains may not be retained. POI(s) provided by Foursquare."
}

因此，我从allDataReturned 中获取features 的数组，然后循环遍历这些功能以仅搜索zipcode，因为这就是我所需要的。

编辑#2 await convertCoordsToLocation()

console.log(await convertCoordsToLocation()) =

{
    "type": "FeatureCollection",
    "query": [
        -73.935242,
        40.73061
    ],
    "features": [
        {
            "id": "address.133608115457788",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 1,
            "properties": {
                "accuracy": "parcel"
            },
            "text": "Railroad Avenue",
            "place_name": "3840 Railroad Avenue, Queens, New York 11101, United States",
            "center": [
                -73.935313,
                40.730278
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.935313,
                    40.730278
                ]
            },
            "address": "3840",
            "context": [
                {
                    "id": "neighborhood.2104431",
                    "text": "Blissville"
                },
                {
                    "id": "postcode.7124328230107530",
                    "text": "11101"
                },
                {
                    "id": "locality.6306827455006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "place.2618194975964500",
                    "wikidata": "Q60",
                    "text": "New York"
                },
                {
                    "id": "district.6262643634006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "region.17349986251855570",
                    "wikidata": "Q1384",
                    "short_code": "US-NY",
                    "text": "New York"
                },
                {
                    "id": "country.19678805456372290",
                    "wikidata": "Q30",
                    "short_code": "us",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "neighborhood.2104431",
            "type": "Feature",
            "place_type": [
                "neighborhood"
            ],
            "relevance": 1,
            "properties": {},
            "text": "Blissville",
            "place_name": "Blissville, New York, New York 11101, United States",
            "bbox": [
                -73.946558,
                40.728349,
                -73.931167,
                40.739547
            ],
            "center": [
                -73.9378,
                40.7347
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.9378,
                    40.7347
                ]
            },
            "context": [
                {
                    "id": "postcode.7124328230107530",
                    "text": "11101"
                },
                {
                    "id": "locality.6306827455006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "place.2618194975964500",
                    "wikidata": "Q60",
                    "text": "New York"
                },
                {
                    "id": "district.6262643634006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "region.17349986251855570",
                    "wikidata": "Q1384",
                    "short_code": "US-NY",
                    "text": "New York"
                },
                {
                    "id": "country.19678805456372290",
                    "wikidata": "Q30",
                    "short_code": "us",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "postcode.7124328230107530",
            "type": "Feature",
            "place_type": [
                "postcode"
            ],
            "relevance": 1,
            "properties": {},
            "text": "11101",
            "place_name": "Queens, New York 11101, United States",
            "bbox": [
                -73.9626849862865,
                40.7276860344023,
                -73.9098450608377,
                40.7628809684208
            ],
            "center": [
                -73.94,
                40.75
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.94,
                    40.75
                ]
            },
            "context": [
                {
                    "id": "locality.6306827455006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "place.2618194975964500",
                    "wikidata": "Q60",
                    "text": "New York"
                },
                {
                    "id": "district.6262643634006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "region.17349986251855570",
                    "wikidata": "Q1384",
                    "short_code": "US-NY",
                    "text": "New York"
                },
                {
                    "id": "country.19678805456372290",
                    "wikidata": "Q30",
                    "short_code": "us",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "locality.6306827455006740",
            "type": "Feature",
            "place_type": [
                "locality"
            ],
            "relevance": 1,
            "properties": {
                "wikidata": "Q18424"
            },
            "text": "Queens",
            "place_name": "Queens, New York, United States",
            "bbox": [
                -73.962795,
                40.5428957646908,
                -73.700272,
                40.80548
            ],
            "center": [
                -73.7976,
                40.7498
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.7976,
                    40.7498
                ]
            },
            "context": [
                {
                    "id": "place.2618194975964500",
                    "wikidata": "Q60",
                    "text": "New York"
                },
                {
                    "id": "district.6262643634006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "region.17349986251855570",
                    "wikidata": "Q1384",
                    "short_code": "US-NY",
                    "text": "New York"
                },
                {
                    "id": "country.19678805456372290",
                    "wikidata": "Q30",
                    "short_code": "us",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "place.2618194975964500",
            "type": "Feature",
            "place_type": [
                "place"
            ],
            "relevance": 1,
            "properties": {
                "wikidata": "Q60"
            },
            "text": "New York",
            "place_name": "New York, New York, United States",
            "bbox": [
                -74.25909,
                40.477399,
                -73.700272,
                40.917577
            ],
            "center": [
                -73.9866,
                40.7306
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.9866,
                    40.7306
                ]
            },
            "context": [
                {
                    "id": "district.6262643634006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "region.17349986251855570",
                    "wikidata": "Q1384",
                    "short_code": "US-NY",
                    "text": "New York"
                },
                {
                    "id": "country.19678805456372290",
                    "wikidata": "Q30",
                    "short_code": "us",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "region.17349986251855570",
            "type": "Feature",
            "place_type": [
                "region"
            ],
            "relevance": 1,
            "properties": {
                "wikidata": "Q1384",
                "short_code": "US-NY"
            },
            "text": "New York",
            "place_name": "New York, United States",
            "bbox": [
                -79.8578350999901,
                40.4771391062446,
                -71.7564918092633,
                45.0239286969073
            ],
            "center": [
                -75.4652471468304,
                42.751210955
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -75.4652471468304,
                    42.751210955
                ]
            },
            "context": [
                {
                    "id": "country.19678805456372290",
                    "wikidata": "Q30",
                    "short_code": "us",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "country.19678805456372290",
            "type": "Feature",
            "place_type": [
                "country"
            ],
            "relevance": 1,
            "properties": {
                "wikidata": "Q30",
                "short_code": "us"
            },
            "text": "United States",
            "place_name": "United States",
            "bbox": [
                -179.9,
                18.8163608007951,
                -66.8847646185949,
                71.4202919997506
            ],
            "center": [
                -97.9222112121185,
                39.3812661305678
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -97.9222112121185,
                    39.3812661305678
                ]
            }
        }
    ],
    "attribution": "NOTICE: © 2021 Mapbox and its suppliers. All rights reserved. Use of this data is subject to the Mapbox Terms of Service (https://www.mapbox.com/about/maps/). This response and the information it contains may not be retained. POI(s) provided by Foursquare."
}

【问题讨论】：

嗯，很明显你的 getZip 函数在某种程度上被破坏了。你做了什么来尝试调试这个？ featureData 包含什么？
@Evert 添加更多信息和数据作为示例
@PA-GW 说了什么 - 现在convertCoordsToLocation 里面有什么？
@ErmiyaEskandary 我也添加了它的输出。
只有在index 不等于0 - 是getZip 幂等时才会为空？例如，您可以使用相同的输入多次调用它并返回相同的输出吗？ 2 console.logs - 它是否 a) 工作并且 b) 返回相同的输出？

标签： javascript async-await fetch-api

【解决方案1】：

需要注意的一点是做

console.log(await someFn());
const stuff = fetch(`some-url?zip=${await someFn()}&foo=bar`);

实际上对await someFn() 进行了两次不同的调用。根据我的测试和我所知道的，await 应该在模板文字中工作。

您声称第一个调用返回了预期的结果，而第二个则没有。您能否提供一个可以测试和调试此行为的最小可重现示例？

无论如何，不管为什么第二次调用返回不同的结果，因为你说控制台记录了预期的结果，这应该可以工作：

async function getWeatherBasedOnCoordinate() {

  const zip = await getZip();
  // console.log(zip);

  const response = await fetch(
      `${ baseWeatherApiUrl }?key=${ weatherApiKey }&postal_code=${zip}&units=I`
  );
  // console.log(response.json());

  return response.json();
}

【讨论】：