使用d3.text API加载文本文件返回Promise而非内容的问题

你遇到的核心问题是：async函数本身就会返回Promise对象，哪怕你在函数内部用了await，也只是让函数内部等待异步操作完成，但函数对外返回的依然是一个承载最终结果的Promise，而非直接的文本内容。

修正后的代码（使用async/await） #

async function loadSync(filename) {
    return await d3.text(filename)
}

async function load_address() {
    var url = "https://example-files.online-convert.com/document/txt/example.txt"
    // 调用async函数必须加await才能拿到实际结果
    var addrs = await loadSync(url)
    console.log(addrs)
}

load_address()

<script src="https://unpkg.com/d3@7.0.4/dist/d3.min.js"></script>

简化写法 #

loadSync函数其实可以简化，因为d3.text本身就返回Promise，async函数里直接返回它和用await包裹后返回效果完全一致：

function loadSync(filename) {
    return d3.text(filename)
}

async function load_address() {
    var url = "https://example-files.online-convert.com/document/txt/example.txt"
    var addrs = await loadSync(url)
    console.log(addrs)
}

load_address()

不用async/await的替代方案（Promise.then） #

如果不想用async/await语法，也可以直接通过Promise的.then()方法处理异步结果：

function load_address() {
    var url = "https://example-files.online-convert.com/document/txt/example.txt"
    d3.text(url).then(addrs => {
        console.log(addrs)
    })
}

load_address()

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