web前端: 解决“先发起请求后收到响应”问题

前言: 当我们发送请求时，由于请求是异步的，前一次发起的请求不会阻塞后一次请求的发起，顺理成章地，前一次请求也未必会比后一次请求先返回。于是导致的直接后果就是后一次请求响应的数据可能先渲染，待前一次请求响应时，直接覆盖了后一次请求的渲染结果。这可不是我们所期望看到的。

举例

前言中所描述的问题，用代码来表示的话，就是:

var result;

// A function to simulate async request delay
var request = function (msec, mockedData, callback) {
  setTimeout(function () {
    callback(mockedData);
  }, msec);
};

var sample = [
  { msec: 200, data: 'stale' },
  { msec: 100, data: 'fresh' }
];

// 模拟`先发起请求后响应`的情景
sample.forEach(function (item) {
  request(item.msec, item.data, function (resp) {
    result = resp;
  });
});

// wait 1s, we inspect the `result`
setTimeout(function () {
  // we expect `result` to be `fresh`, but it is `stale`
  console.log(result); // => `stale`
}, 1000);

代码中后一次执行的异步操作覆盖了前一次执行的，最后得到的result为'stale'，显然是错误的。

解决方案

第一种方法
在前一次未返回结果时，禁止发送下一次请求，也就是把异步的请求强行改为同步的，这显然不是最好的解决方案。
第二种方法
在每次响应后且在渲染之前，判断当前响应是不是对应最新一次请求的。是，则渲染；不是，则不渲染。
这种思路最容易想到的实现就是使用全局变量标记最新请求，局部变量标记当前请求，然后在响应回调中判断局部变量的值是否和全局变量的值一样。如果不一样，忽略响应结果；如果一样，我们可以断言这是最新请求的响应，直接渲染。
以下是这种思路针对上面代码的改写：

var result;
var globalMark = 0;

// A function to simulate async request delay
var request = function (msec, mockedData, callback) {
  setTimeout(function () {
    callback(mockedData);
  }, msec);
};

var sample = [
  { msec: 200, data: 'stale' },
  { msec: 100, data: 'fresh' }
];

// 模拟`先发起请求后响应`的情景
sample.forEach(function (item) {
  var localMark = ++globalMark;

  request(item.msec, item.data, function (resp) {
    if (localMark !== globalMark) {
      return;
    }

    result = resp;
  });
});

// wait 1s, we inspect `result`
setTimeout(function () {
  // now our `result` is `fresh`, just as expected
  console.log(result); // => `fresh`
}, 1000);

因为我们通常是用promise的异步请求来进行调用接口的，所以我们可以改为promise的版本:

var result;
var globalMark = 0;


// 将异步函数转换为promise式
var promisify = function (fn) {
  // Is `fn` thenable?
  return fn.then ? fn : function () {
    var args = Array.from(arguments);
    return new Promise(resolve => void fn(...args.concat(resolve)));
  };
};

// 将request方法promise化

// A function to simulate async request delay
var request = function (msec, mockedData, callback) {
  setTimeout(function () {
    callback(mockedData);
  }, msec);
};

// decorate `request` with `promisify`
request = promisify(request);

var sample = [
  { msec: 200, data: 'stale' },
  { msec: 100, data: 'fresh' }
];

// 模拟`先发起请求后响应`的情景
sample.forEach(function (item) {
  var localMark = ++globalMark;

  request(item.msec, item.data).then(function (resp) {
    if (localMark !== globalMark) {
      return;
    }
    result = resp;
  });
});

// wait 1s, we inspect `result`
setTimeout(function () {
  // now our `result` is `fresh`, just as expected
  console.log(result); // => `fresh`
}, 1000);

这种思路可以正常工作，而且简单直观。但是当我们要处理大量这类请求问题时，这类重复逻辑的代码将散落在各个地方，不是很优雅。问题不在于思路上，而在于实现。我们需要在源头（请求）处规避（控制）问题，而不是到结果（响应）处解决问题。

第三种方法
我们可以对原有promisify后得到的方法再进行一层装饰，在请求处就控制问题，而不是在得到结果后再进行解决问题。

var result;

// 将promise再经过一层处理
var mutePrior = function (promisifiedFunc) {
  var registry = [0];

  return function () {
    var promise = promisifiedFunc(...arguments);
    registry.push(promise);

    return new Promise(function (...actions) {
      var proxyCallbacks = actions.map(action => function (result) {
        if (registry.indexOf(promise) === registry.length - 1) {
          action(result);
          registry.length = 1;
        }
      });

      promise.then(...proxyCallbacks);
    });
  };
};

// 将异步函数转换为promise式
var promisify = function (fn) {
  // Is `fn` thenable?
  return fn.then ? fn : function () {
    var args = Array.from(arguments);
    return new Promise(resolve => void fn(...args.concat(resolve)));
  };
};

// 将request方法promise化

// A function to simulate async request delay
var request = function (msec, mockedData, callback) {
  setTimeout(function () {
    callback(mockedData);
  }, msec);
};

// decorate `request` with `promisify`
request = mutePrior(promisify(request));

var sample = [
  { msec: 200, data: 'stale' },
  { msec: 100, data: 'fresh' }
];

// 模拟`先发起请求后响应`的情景
sample.forEach(function (item) {
  request(item.msec, item.data).then(function (resp) {
    result = resp;
  });
});

// wait 1s, we inspect `result`
setTimeout(function () {
  // now our `result` is `fresh`, just as expected
  console.log(result); // => `fresh`
}, 1000);

这样就可以在请求的源头解决这个问题O(∩_∩)O哈哈~。

全部频道

web前端: 解决“先发起请求后收到响应”问题

举例

解决方案