Promise转换为async await语法：响应数据处理函数写法咨询

现有代码问题修正 #

错误点说明 #

• 错误使用await调用普通同步函数：你代码中定义数据处理函数时额外加了await属于完全不必要的用法，且你只完成了函数定义没有主动调用，数据渲染逻辑永远不会执行
• 缺失HTTP错误判断：fetch仅在网络请求本身失败时才会抛出异常进入catch分支，接口返回4xx、5xx类状态码时不会主动触发错误，需要手动判断响应状态
• 请求体格式不规范：你配置了请求头为application/json，直接传模板字符串包裹的id不符合JSON格式要求，特殊场景下会导致服务端解析失败

修正后代码 #

export async function getDataFromServer(id) {
    try {
        const resp = await fetch('/dataget', {
            credentials: "same-origin",
            mode: "same-origin",
            method: 'POST',
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(id)
        })

        // 手动判断HTTP响应状态
        if (!resp.ok) {
            throw new Error('server')
        }

        const data = await resp.json()
        // 直接执行数据处理和渲染逻辑即可
        console.log(data)
        renderDataFromServer(data)
    }
    catch (err) {
        if (err.message === "server") return
        console.log(err)
    }
}

额外说明 #

如果你的数据处理逻辑需要抽离为独立异步函数，再给函数调用加上await即可，普通同步函数不需要加该关键字。

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