如何使用fetch().then()获取Response body并存入const变量

1. 定义字符串类型的请求体 #

用const声明字符串格式的请求体，可根据实际业务需求修改内容：

// 定义字符串类型的请求体
const moveBody = '{"workItemId":123,"targetStateName":"Closed"}';

2. 修正并完善你的请求代码 #

原代码存在链式调用逻辑问题，第二个then无法获取正确的响应数据，以下是调整后的完整代码，同时加入了请求体的打印操作：

const moveBody = '{"workItemId":123,"targetStateName":"Closed"}';

// 打印定义好的请求体内容
console.log('当前请求体:', moveBody);

fetch("url", {
    headers: {
        "Content-Type": "application/json",
        'Authorization': 'Basic ' + btoa(globalUsername + ":" + globalPassword),
    },
    method: "POST",
    body: moveBody
})
.then(response => {
    console.log('响应状态码:', response.status);
    // 返回响应文本，供下一个then处理
    return response.text();
})
.then(responseText => {
    console.log('响应内容:', responseText);
})
// 捕获请求过程中的异常
.catch(error => {
    console.error('请求出错:', error);
});

关键说明 #

• const声明的变量不可被重新赋值，适合固定的请求体场景
• 第一个then必须返回response.text()，否则第二个then无法拿到有效响应数据
• response.text()无需传入参数，它会自动读取并返回响应的文本内容
• 新增catch块可捕获网络错误、请求失败等异常情况

参考截图 #

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