fetch请求返回Status 201 无法获取预期JSON对象问题咨询

问题原因 #

• 状态码判断逻辑范围过窄：你当前代码仅对resp.status === 200的情况做了正常响应处理，而你的本地服务器对POST接口返回的是201状态码（属于2xx成功类状态，通常用于表示资源创建成功），不符合判断条件就会直接进入reject分支，自然无法获取返回的JSON数据。Thunder Client等接口测试工具默认会对所有2xx状态的响应做正常解析，所以测试时看起来是正常的。
• 多余的JSON解析逻辑：resp.json()方法已经自动将响应的JSON字符串解析为JavaScript对象，你后续又调用JSON.parse(dataJson)会直接抛出类型错误，就算状态码判断正确也无法正常拿到数据。

修正方案 #

把状态码判断逻辑调整为覆盖所有2xx成功状态，同时删掉多余的JSON.parse调用即可，修正后的代码如下：

async function send(params) {
    var path = document.querySelector('#path');
    var skills = document.querySelector('#skills');
    var skillsList = skills.value
    skillsList = skillsList.replace(/\n\r?/g, '|');
    const dataToSend = JSON.stringify({"path": path.value, "skills": skillsList});
    console.log(dataToSend);
    let dataReceived = ""; 
    fetch("http://localhost:3000/getSkills", {
        credentials: "same-origin",
        mode: "cors",
        method: "post",
        headers: { "Content-Type": "application/json" },
        body: dataToSend
    }).then(resp => {
        // resp.ok 会自动判断状态码是否在200-299区间
        if (resp.ok) {
            return resp.json();
        } else {
            console.log("Status: " + resp.status)
            return Promise.reject("server")
        }
    }).then(dataJson => {
        dataReceived = dataJson
        console.log(`Received: ${dataReceived}`)
    }).catch(err => {
        if (err === "server") return
        console.log(err)
    }) 
}

内容的提问来源于stack exchange，提问作者Hasan A Yousef