JS Fetch请求出现TypeError: data is undefined问题求助

我想要解析HTTP请求的响应，按需显示错误后返回数据。当前实现代码如下：

fetch(URL,{method:"GET"})
.then(async response => { await read_errors(response) })
// .then(response => { read_errors(response) }) (两种写法都尝试过)
.then( function(data) { 
    doSomething(data)
})
.catch( error => { display_error(error) })

配套函数：

async function read_errors(response) {
    const isJson = response.headers.get('content-type')?.includes('application/json');
    const data = isJson ? await response.json() : null;

    const isText = response.headers.get('content-type')?.includes('text/');
    const text = isText ? await response.text() : null;

    // 检查错误响应
    if (!response.ok) {
        // 从响应体获取错误信息或默认使用响应状态码
        const error = (data && data.message) || text || response.status;
        console.error("Something went wrong : ",error)
        return Promise.reject(error);
    } else {
        fckng_response = isJson ? data : text
        return Promise.resolve(fckng_response)
    }
}

但遇到了TypeError: data is undefined的错误，服务器返回的响应头部和数据均正常，请问哪里操作有误？

1. 第一个then回调未返回值 #

你第一个then里的箭头函数没有返回read_errors的执行结果：

.then(async response => { await read_errors(response) })

这里await了异步函数，但没把结果return出去，导致下一个then接收到的data是undefined。改成下面两种写法都可以：

// 写法1：省略大括号自动返回
.then(async response => await read_errors(response))
// 写法2：显式return
.then(async response => { return await read_errors(response) })

2. 响应体被重复读取 #

response.json()和response.text()都是消费响应体流的方法，同一个响应体只能被读取一次。你现在两个方法都调用了，第二个方法会因为流已经被读完而返回空或报错。

修改read_errors函数，先确定响应类型，只读取一次：

async function read_errors(response) {
    const contentType = response.headers.get('content-type');
    let responseData = null;

    if (contentType?.includes('application/json')) {
        responseData = await response.json();
    } else if (contentType?.includes('text/')) {
        responseData = await response.text();
    }

    // 检查错误响应
    if (!response.ok) {
        const error = (responseData?.message) || responseData || response.status;
        console.error("Something went wrong : ", error);
        return Promise.reject(error);
    } else {
        return responseData;
    }
}

3. 未声明变量导致全局污染 #

原代码里fckng_response = isJson ? data : text没有用let/const声明，会变成全局变量。不过上面的修复方案已经去掉了这个变量，直接返回responseData更简洁。

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