为啥 async/await Axios 请求不会返回 Data 而不是 Promise 对象 [重复]

Posted 2023-03-07

【中文标题】为啥 async/await Axios 请求不会返回 Data 而不是 Promise 对象 [重复]

【英文标题】：Why will async/await Axios request not return Data instead of a promise object [duplicate]为什么 async/await Axios 请求不会返回 Data 而不是 Promise 对象 [重复]

【发布时间】：2021-05-11 10:28:36

【问题描述】：

我知道有很多类似的问题，但所有答案都说使用 async 函数和内部的 await 函数调用......我已经在这样做了。经过几个小时的努力，我需要提出这个问题......如果你觉得有必要，请随意投反对票，但我已经在寻找答案了。

所以我有点困惑，可以多关注一下这个问题。我正在使用 Axios 从 API 调用中返回数据。我有一个异步函数发送请求并等待 axios.get 函数请求。所以在我看来，它应该返回数据而不是承诺。但是它返回了一个承诺，我尝试过的任何东西都不会返回数据。我可以控制台记录它并吐出数据，但实际返回的是一个承诺对象。如果有人能告诉我这里出了什么问题，我将不胜感激。

import axios from "axios";
import  LatLngTuple  from "leaflet";

const primaryKey = '#################################################';
const getGeoData = (apiUrl: string) => (
    axios.get(apiUrl, 
        timeout: 5000,
        headers: 
            "Content-Type": "application/json",
        ,
    )
);

async function geoLocate(longAddress, country)
    let geocodeUrlTemplate = 'https://atlas.microsoft.com/search/address/json?api-version=1.0&subscription-key=Azure-Maps-Primary-Subscription-key&query=longAddresscountrySet=country&view=Auto';
    let geoRequestUrl = geocodeUrlTemplate.replace('Azure-Maps-Primary-Subscription-key', primaryKey)
        .replace('longAddress', encodeURIComponent(longAddress))
        .replace('country', country);

    try 
        const data = await getGeoData(geoRequestUrl);
        const geoData = data.results[0].position;
        return [geoData.lat, geoData.lon];
     catch (err) 
        console.error(err);
    
;

export default geoLocate;

【问题讨论】：

哪个变量是出乎意料的承诺？

所以我正在解构从 getGeoData 返回的承诺数据。然后使用geoData中的解构data来获取位置对象，然后我返回两个数字的数组[geoData.lat，geoData.lon]。它不是返回一个数组，而是返回一个带有数组的 promise 对象。

To await inside an async 意味着自己变成异步（承诺返回），而不是同步阻塞。

【参考方案1】：

如果你仔细想想，geoLocate 不会返回任何东西而不是承诺。 geoLocate 本身必须等待来自您的 API 调用的数据，因此在获得数据之前，它无法将该数据返回给它的调用者。因此，如果您想使用 API 调用中的数据，它必须返回一个 Promise。

您应该知道，每当您在函数声明前使用 async 时，该函数会自动返回一个 Promise，因此任何调用它的东西都需要 await 您的函数才能访问已解析的数据（或使用.then(data => ... 语法）。