SPA绕坑指南，聊聊你也许会遇到的问题

在进入正题之前，敲下黑板，不同的浏览器对同域限制并发数量是不一样的，这也是为什么大厂都有很多不同的域名去加载资源，
拿chrome浏览器来说

这张图应该一目了然，同域的资源最多同时请求一定数量（6），知道这个前提，就开始进入正题

SPA作为前端一员应该熟悉不过了，对前后端的分离有着重大意义。

这里要说的，当你的 pwa 项目中路由过多，每个route下查询的数据也比较多，
当你快速切换route的时候，就有可能出现上述说的问题，会阻塞你的连接。
当然如果你的服务响应很快，从用户获取结果上没有任何问题，
你细细的品，如果一个route 5个接口，我1秒内点击了五个route 其实最终有用的数据是最后一个route 的数据，其他多余请求资源就无形中浪费掉了。

这里要考虑的切换的时候 需要cancel 不必要的接口请求，

这是 axios 的 cancel方式

const axios = require('axios');

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('http://localhost:4000/test/ax', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});
 

// cancel the request (the message parameter is optional)


setTimeout(() => {
	source.cancel('Operation canceled by the user.');
}, 4000)

这里要解决的就是要获取页面的 pending 的接口，当切换路由的时候把还在 pending的接口cancel 掉， 话就说到这儿吧，
代码码起来~~， 你又对细节处理更精一步。。。。

如果前端有了 cancel 服务端是不是也要把 线程 或则进程 cancel 掉，以减少性能消耗呢？

可以看 https://blog.csdn.net/ihtml5/article/details/106478880