如何在fetch()作用域外获取拉取数据 避免返回pending状态Promise

你代码里有两个核心错误导致拿不到预期数据：

• GetWords()函数没有返回fetch()生成的Promise链，函数默认返回undefined，await一个undefined自然拿不到接口返回的单词数组
• 所有异步接口请求都不会同步返回结果，async声明的函数本身就会返回Promise对象，你直接在同步代码里读取LoadWords()的返回值，打印时Promise还没从pending状态变为fulfilled，自然拿不到最终数据

function GetWords() {
    // 补全return，返回整个fetch请求的Promise链
    return fetch("https://random-word-api.herokuapp.com/word?number=100")
        .then(response => response.json())
}

async function LoadWords() {
    const words = await GetWords()
    return words
}

// 异步结果必须在Promise状态变更后读取，两种常用写法二选一即可
// 写法1：通过then回调拿结果
LoadWords().then(words => {
    console.log(words); // 此处就能拿到预期的单词数组
})

// 写法2：在async上下文里用await拿结果
// async function run() {
//     const words = await LoadWords()
//     console.log(words);
// }
// run()

• JavaScript的异步逻辑不会阻塞同步代码执行，永远不要尝试在同步代码流里直接读取异步请求的返回值
• 所有依赖接口返回数据的业务逻辑，必须放到.then()回调里，或者await关键字之后的异步上下文中执行

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