在 JS 中实现轮询其实主要的应用场景就是：我们需要从服务器端获取一些未来一小段时间内可以确定的事情。比如最经典的场景就是：想象一个用户在网页端通过扫码进行支付，我们怎么判断用户支付的状态。

JS 实现

其实在 JS 中实现最简单的轮询就是使用 clearInterval()，还是说我们开头的应用场景，用户的支付状态：

const timeId = setInterval(() => {

if (paying == 'success') {

  clearInterval(timeId)

};

checkPaymentDone();

},3000)

在 setInterval 里面，我们每隔三秒就去调用 checkPaymentDone() 方法，如果在某种情况下 paying == 'success' 成立，我们就清除这个轮询。所以再看 checkPaymentDone() 的实现：

axios.post('/payment/check', {

    // 如果需要传数据，从这里传

}).then(response => {

if (response.data.finished) {

 paying = 'success';

}

})

那么从这个代码可以知道，也就是相当于我们每隔三秒就去请求 /payment/check，然后再根据服务器返回的数据判断如何更新 paying 这个值。

服务端的实现

这里举 Laravel 的例子，首先我们会有路由：

Route::post('/payment/check','PaymentController@check');

然后，在 PaymentController 的 check 方法中，大致的逻辑可以这个样子：

public function check()

{

// 判断返回的条件，一般是查询数据库

if (condition) {

  return response()->json(['finished' => true]);

}

return response()->json(['finished' => false]);

}

注意这里返回的 ['finished' => true] 其实是跟 checkPaymentDone() 中的代码相关联的 if (response.data.finished) 。

总结

轮询的应用场景是确定未来一小段时间的因素，通过循环地向服务器发请求，然后再根据服务器的返回状态清除 clearInterval()。