Angular 2中Promise返回值实现及sessionStorage then未定义报错求助

嘿，我来帮你搞定这两个问题！先拆解来看：

一、如何在Promise内返回值 #

在Angular（包括Angular 2）里，Promise的核心是通过resolve()传递最终值，或者在then()回调里返回值来传递给下一个链式调用。举两个常见场景：

1. 自定义Promise时返回值 #

如果你是自己创建Promise实例，直接在构造函数里用resolve()把值传出去就行：

function myPromiseFunction(): Promise<string> {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      const result = "这是Promise返回的值";
      resolve(result); // 这里就是返回值的关键
    }, 1000);
  });
}

// 调用时通过then接收
myPromiseFunction().then(value => {
  console.log(value); // 输出：这是Promise返回的值
});

2. 链式调用时传递值 #

如果是在已有Promise的then()里处理逻辑，直接return的值会被自动包装成一个新的resolved Promise，传递给下一个then()：

fetchSomeData() // 假设这是一个返回Promise的异步方法
  .then(rawData => {
    // 处理原始数据
    const processedData = rawData.trim();
    return processedData; // 返回处理后的值给下一个then
  })
  .then(finalData => {
    console.log(finalData); // 拿到处理后的结果
  });

二、解决'then is not defined'错误 #

你遇到这个错误，大概率是因为你的函数有时候返回Promise，有时候直接返回普通值——当你直接返回sessionStorage里的值时，这个值是字符串/普通类型，没有then()方法，所以调用时会报错。

解决思路很简单：让函数始终返回Promise，哪怕是同步的返回值，也要用Promise.resolve()包装一下。这样不管有没有sessionStorage的值，调用者都能统一用then()处理。

正确的代码示例 #

function getTargetValue(): Promise<any> {
  // 用getItem更规范，避免下标访问的隐式问题
  const storedValue = sessionStorage.getItem('new');
  
  if (storedValue) {
    // 直接返回一个已resolve的Promise，终止后续逻辑
    return Promise.resolve(storedValue);
  }

  // 如果没有缓存值，执行后续异步逻辑（比如HTTP请求）
  return this.http.get('/api/some-data')
    .toPromise() // Angular的HttpClient返回Observable，转成Promise
    .then(response => {
      const data = response.body;
      // 把值存到sessionStorage
      sessionStorage.setItem('new', data);
      return data; // 返回异步获取的值
    })
    .catch(error => {
      console.error('获取数据失败:', error);
      throw error; // 抛出错误让调用者处理
    });
}

// 调用时就不会再出现'then is not defined'了
getTargetValue()
  .then(value => {
    console.log('最终拿到的值:', value);
  })
  .catch(error => {
    // 处理错误情况
  });

关键说明 #

• 用sessionStorage.getItem('new')代替直接下标访问，这是更标准的API用法，能避免一些潜在的类型问题。
• 当缓存存在时，return Promise.resolve(storedValue)会直接返回一个处于resolved状态的Promise，后面的异步代码（HTTP请求部分）不会执行，完美实现“终止后续函数执行”的需求。
• 统一返回Promise后，调用者的then()就能稳定工作，不会出现找不到方法的错误。

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