如何将console.log的结果作为返回值？附Alexa排名实现代码

嘿，看来你已经搞定了在console.log里输出Alexa排名的部分！要把这个结果作为返回值返回的话，得先注意一个关键点：你的请求是异步操作，直接用return肯定拿不到结果的，得用回调函数或者Promise来处理。给你两种实用的方案：

方案1：用回调函数传递结果 #

因为XMLHttpRequest是异步执行的，我们没法同步返回结果，所以可以把处理结果的逻辑放在一个回调函数里，等请求完成后调用这个函数把排名传出去：

function getAlexaRank(callback) {
  var a = document.createElement('a');
  a.href = this.url;
  var domain = a.hostname, 
      req = new XMLHttpRequest(), 
      cors = 'https://cors-anywhere.herokuapp.com/';

  function init(){
    req.addEventListener('load', function(){
      var r, n;
      // 注意原代码里的HTML转义符要改成正常的尖括号，不然正则匹配不到
      r = /<POPULARITY[^>]*TEXT="(\d+)"/g;
      n = r.exec(this.response);
      var rank = null != n ? n[1] : -1;
      // 调用回调函数，把结果传出去
      callback(null, rank);
    });
    // 别忘了处理请求出错的情况
    req.addEventListener('error', function(err) {
      callback(err, null);
    });
    req.open('GET', cors+'http://data.alexa.com/data?cli=10&dat=s&url='+domain);
    req.send();
  }
  init();
}

// 调用的时候这样用
getAlexaRank(function(err, rank) {
  if (err) {
    console.error('获取排名出错了:', err);
    return;
  }
  console.log("alexa rank " + rank);
  // 这里你就可以把rank用在任何需要的地方，相当于拿到了"返回值"
});

方案2：用Promise（更推荐，现代写法） #

Promise是ES6之后处理异步的标准方式，代码更清晰，还能配合async/await让异步代码看起来像同步代码，这样就能真正把排名作为函数返回值了：

function getAlexaRank() {
  // 返回一个Promise对象
  return new Promise((resolve, reject) => {
    var a = document.createElement('a');
    a.href = this.url;
    var domain = a.hostname, 
        req = new XMLHttpRequest(), 
        cors = 'https://cors-anywhere.herokuapp.com/';

    req.addEventListener('load', function(){
      var r, n;
      r = /<POPULARITY[^>]*TEXT="(\d+)"/g;
      n = r.exec(this.response);
      var rank = null != n ? n[1] : -1;
      // 请求成功，把排名传递出去
      resolve(rank);
    });

    req.addEventListener('error', function(err) {
      // 请求失败，传递错误信息
      reject(err);
    });

    req.open('GET', cors+'http://data.alexa.com/data?cli=10&dat=s&url='+domain);
    req.send();
  });
}

// 方式1：用then/catch处理
getAlexaRank()
  .then(rank => {
    console.log("alexa rank " + rank);
    // 这里可以把rank继续传递到其他流程里
  })
  .catch(err => {
    console.error('获取排名出错:', err);
  });

// 方式2：用async/await（需要在async函数中使用）
async function getAndUseRank() {
  try {
    // 等待Promise完成，拿到排名
    const rank = await getAlexaRank();
    console.log("alexa rank " + rank);
    // 这里就能直接把rank作为函数的返回值了！
    return rank;
  } catch (err) {
    console.error('获取排名出错:', err);
    return -1; // 出错时返回默认值
  }
}

// 调用这个async函数
getAndUseRank().then(finalRank => {
  console.log('最终拿到的排名返回值:', finalRank);
});

另外提醒一下：你原代码里的正则用了<和>，这是HTML的转义字符，在JS字符串里要改成<和>才能正确匹配响应里的内容哦。

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