JavaScript如何从请求响应中提取单个值（如session_id）

你不需要手动截取字符串，接口返回的是标准JSON结构，直接解析后就能取到session_id，同时要注意fetch是异步逻辑，不能在请求流程外读取还没赋值的变量。

核心注意点 #

• 不要用res.text()接收JSON格式的响应，改用res.json()直接把响应内容转成可操作的JavaScript对象，直接读取属性即可，完全规避字符串截取长度不固定、位置偏移的问题
• fetch是异步API，所有依赖session_id的后续逻辑，必须写在请求成功的回调内部，不能在fetch调用的外层直接读取变量，否则会因为请求还没返回、变量未赋值读到undefined
• 如果需要跨页面、刷新后保留session_id，可以把值存在localStorage里，不用每次打开页面都重新登录

可用代码示例 #

Promise 链式写法 #

// 全局作用域定义变量存储session_id，所有后续请求都能访问
let session_id = null;

function login(){
  fetch('你的登录接口地址', {
    method: 'POST',
    headers: {
      // 你的请求头配置，比如Content-Type等
    },
    body: /* 你的登录参数，注意格式要和接口要求匹配 */
  })
  .then(res => {
    if(!res.ok) throw new Error('登录请求失败，状态码：' + res.status);
    // 直接解析JSON响应，替代原来的res.text()
    return res.json();
  })
  .then(data => {
    // data就是解析完成的响应对象，直接取对应字段
    console.log('接口完整返回内容', data);
    session_id = data.session_id;
    console.log('成功获取session_id：', session_id);
    
    // 所有需要用到session_id的后续操作，全部写在这里
    // 比如发起后续业务请求、跳转页面等
  })
  .catch(err => {
    console.error('登录流程出错：', err);
  })
}

async/await 写法（逻辑更直观，不容易搞混执行顺序） #

let session_id = null;

async function login() {
  try {
    const res = await fetch('你的登录接口地址', {
      method: 'POST',
      headers: {
        // 请求头配置
      },
      body: /* 登录参数 */
    });
    if(!res.ok) throw new Error('登录请求失败');
    const data = await res.json();
    session_id = data.session_id;
    console.log('session_id存储完成：', session_id);
    // 后续操作直接在这里写即可，不需要嵌套then
    return session_id;
  } catch (err) {
    console.error('登录出错：', err);
  }
}

原有代码的错误原因 #

• 用res.text()拿到的是原始字符串，不是JS对象，直接读取.session_id属性会得到undefined
• 在then链外侧写console.log(body.session_id)时，fetch请求还没完成，变量还没被赋值，自然读不到值
• 手动调用substring截取的方案本身就不成立：响应字段顺序、长度可能随时变化，而且你传入的第二个参数是结束索引不是截取长度，传30会因为结束位置小于起始索引291，返回空字符串
• 出现Cannot read properties of undefined (reading 'substr')报错，是因为你调用substring的时候，obj变量还没被赋值为响应内容，值为undefined

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