Nightwatchjs：如何从browser.getCookie()正确获取返回值？

嘿，我太懂你现在的困惑了！这个坑很多刚接触JS的小伙伴都会踩——明明回调里能打印出正确的Cookie值，但外面的cookieValue就是undefined，核心原因是**browser.getcookie是一个异步操作**，咱们得先搞明白异步和同步的区别，再调整代码逻辑。

为什么会出现undefined？ #

JavaScript里的异步函数不会立刻返回结果，它会先继续执行后面的代码，等异步操作（比如这里获取Cookie的动作）完成后，才会调用你传入的回调函数。

你原来的代码里：

var cookieValue = browser.getcookie('myCookieName', function(response){
  console.log(response.value);
  return response.value;
});

• 当执行到这一行时，browser.getcookie会立刻返回undefined（因为它是异步函数，没有同步返回值），所以cookieValue直接被赋值成了undefined。
• 之后当Cookie获取完成，回调函数才会执行，这时候里面的return response.value根本不会影响外面的cookieValue——因为外面的代码早就跑完了，var cookieString = cookieName + cookieValue已经执行过了。

正确的解决方法 #

咱们得把依赖Cookie值的代码，放到异步操作完成之后执行，下面给你三种常用的实现方式：

1. 直接把逻辑写在回调函数里 #

这是最基础的写法，把需要用cookieValue的代码都放到回调内部：

var cookieName = 'myCookieName:';
browser.getcookie('myCookieName', function(response){
  var cookieValue = response.value;
  console.log(cookieValue);
  // 在这里处理拼接和后续逻辑
  var cookieString = cookieName + cookieValue;
  console.log(cookieString);
  // 比如把cookieString传给其他函数，或者做其他操作
});

2. 用Promise包装异步操作（更灵活） #

如果你的代码逻辑比较复杂，回调嵌套会很麻烦，这时候可以把getcookie包装成Promise，用.then()来处理结果：

var cookieName = 'myCookieName:';

// 先把异步的getcookie转换成Promise
function getCookie(name) {
  return new Promise((resolve, reject) => {
    browser.getcookie(name, function(response) {
      if (response && response.value) {
        resolve(response.value);
      } else {
        reject(new Error('Cookie不存在或获取失败'));
      }
    });
  });
}

// 用.then()链式调用处理结果
getCookie('myCookieName')
  .then(cookieValue => {
    var cookieString = cookieName + cookieValue;
    console.log(cookieString);
    // 后续操作都写在这里
  })
  .catch(error => {
    console.error('出问题啦:', error);
  });

3. 用async/await（最简洁的写法） #

如果你的环境支持ES6+（现在大部分浏览器和Node.js都支持），可以用async/await语法，让异步代码看起来像同步代码一样：

var cookieName = 'myCookieName:';

// 同样先包装成Promise
function getCookie(name) {
  return new Promise((resolve, reject) => {
    browser.getcookie(name, function(response) {
      if (response && response.value) {
        resolve(response.value);
      } else {
        reject(new Error('Cookie不存在或获取失败'));
      }
    });
  });
}

// 必须在async函数里使用await
async function handleCookie() {
  try {
    // 等待Promise完成，拿到Cookie值
    var cookieValue = await getCookie('myCookieName');
    var cookieString = cookieName + cookieValue;
    console.log(cookieString);
    // 后续操作写在这里
  } catch (error) {
    console.error('出问题啦:', error);
  }
}

// 调用这个async函数
handleCookie();

总结一下 #

异步操作的核心就是：不要指望它立刻返回结果，所有依赖这个结果的代码都要等异步操作完成后再执行。上面三种方法本质都是让代码“等待”异步操作完成，只是写法不同而已，你可以根据自己的代码复杂度选择合适的方式~

内容的提问来源于stack exchange，提问作者Kottam Ranga Reddy