cookieStore.get返回Promise如何转换为可用于逻辑判断的字符串

问题成因 #

• 所有标记async的函数默认返回Promise对象，你直接调用getCookie('foo')时没有加await关键字，拿到的cookievalue是Promise实例，不是异步执行完成后返回的真实Cookie值
• JSON.stringify序列化Promise对象时，由于Promise没有定义自定义序列化规则，会直接调用默认的toString()方法，最终得到"[object Promise]"的结果

修复方案 #

方案1：在async上下文中使用await获取值 #

将逻辑放在async函数内，用await等待Promise执行完成拿到真实Cookie值，同时需要对URL编码的结果做解码处理：

const getCookie = async (name) => {
  const cookie = await cookieStore.get(name);
  if(cookie) {
    // 解码URL编码的Cookie值
    const decodedValue = decodeURIComponent(cookie.value);
    return decodedValue;
  } else {
    console.log('cookie not found');
    return null;
  }
}

// 异步逻辑放在async函数内执行
const handleCookieLogic = async () => {
  const cookieValue = await getCookie('foo');
  if(!cookieValue) return;
  // 提取locale字段值
  const locale = cookieValue.split('=')[1];
  // 按需求做逻辑判断
  if(locale === 'es_us') {
    // 执行西语站点对应逻辑
  } else if(locale === 'en_us') {
    // 执行英语站点对应逻辑
  }
}

handleCookieLogic();

方案2：用.then链式调用处理异步结果 #

如果不方便嵌套async函数，可以用Promise的then方法接收返回值：

getCookie('foo').then(cookieValue => {
  if(!cookieValue) return;
  const locale = cookieValue.split('=')[1];
  if(locale === 'es_us') {
    // 执行西语站点对应逻辑
  } else if(locale === 'en_us') {
    // 执行英语站点对应逻辑
  }
})

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