为何await处理后返回值仍为Promise？async/await使用困惑

一、async函数内部可正常处理数据 #

我尝试用fetch API结合async/await从服务器取数据，在async函数内部能正常操作数据：

async function someFunction(url) {
    let response = await fetch(url)
    let data = await response.json()
    // 这里可以正常使用data
    console.log(data) // 正确打印数据
    data.map(x => x.key) // 运行正常
}

二、返回至其他函数时，返回值仍是Promise #

但把数据返回给其他函数使用时，拿到的却还是Promise：

function mainFunction() {
    let data = getData(url)
    // 这里data是Promise
    console.log(data) // "Promise {<pending>}"
    data.map(x => x.key) // "Uncaught TypeError: data.map is not a function"
}

async function getData(url) {
    let response = await fetch(url)
    let data = await response.json()
    console.log(data) // 正确打印数据
    return data
}

三、疑惑点 #

用data = await getData(url)能正常运行，但VS Code提示“'await' has no effect on the type of this expression”，我搞不懂：明明已经在getData里用await处理完数据才返回，为什么外面还要再await一次？

原因解释 #

1. 所有async函数的返回值必然是Promise
   不管你在async函数内部用不用await，也不管你return的是原始值还是对象，async函数都会自动把返回值包装成Promise。你在getData里return的data，其实会被Promise.resolve(data)包裹，所以调用getData(url)得到的始终是Promise，必须通过await或者.then()才能取出里面的实际数据。

2. 关于VS Code的提示
   这个提示通常是因为TypeScript类型定义的问题：如果getData的返回类型被错误标记成了非Promise类型（比如直接标记成数组或对象类型），编辑器就会认为await是多余的。检查一下类型定义，确保getData的返回类型是Promise<你的数据类型>，这样提示就会消失。

修正写法 #

方法1：把mainFunction改成async函数

async function mainFunction() {
    let data = await getData(url)
    console.log(data)
    data.map(x => x.key) // 正常运行
}

方法2：用.then()处理Promise

function mainFunction() {
    getData(url).then(data => {
        console.log(data)
        data.map(x => x.key) // 正常运行
    })
}

内容的提问来源于stack exchange，提问作者Angel Torres