前端问题汇总

1,672 阅读2分钟

1、axios中的get请求浏览器会产生缓存

浏览器对于 GET 请求会将请求结果缓存起来,而 POST 不会。

其中更具体的细节是:

  • Chrome 和 Firefox 会检测 GET 请求的如果是静态资源才会缓存,如果是数据则不会缓存。
  • IE 浏览器则会将 GET 请求全部缓存,不会检测请求的是什么。

这样的场景很多,例如我们添加或修改数据成功后,立马调用列表查询接口,因查询接口是get请求,产生了缓存,响应数据还是之前数据,并没有新增或修改后的数据,给人感觉像是添加或修改失败,这显然是不合理的,

那么如何禁止缓存呢?

1、我们可以给每一次的get 请求添加一个唯一的参数,最好是当前的时间 或者是随机数 都可以,浏览器 就会以为 这是一次新的get 请求,然后就会重新发起请求。

2、改为post请求

axios get请求添加去缓存

let Inc = (new Date()).getTime();
//axios 请求拦截器
axios.interceptors.request.use((config) => {
    // get请求添加一个去缓存变量
    if (config.method === 'get') {
        Inc += 1;
        if (config.params) {
            config.params._ = Inc;
        } else {
            config.params = {
                _: Inc
            };
        }
    } 
    return config;
}, (error) => {
    return Promise.reject(error);
});

2、数字转千分位格式

let num=12345678;
console.log(num.toLocaleString()); // 12,345,678

3、用户输入字符会自动跳转到尾部问题

1、用户输入履行拼音时光标自动定位到最后面。(误操作?)

2、重现问题,搜狗输入法输入lü正常,微软输入法输入lü后问题出现。(输入法问题?)

3、去其他系统查看,微软输入lü正常。

4、系统问题。(排查代码)

5、发现该系统输入特殊字符或者表情都会出现该问题。(应该是有input事件做了过滤)

6、F12发现limitchar属性有正则表达式。(猜测是为了限制用户不要输入特殊字符或者表情)

7、分析正则。

8、加上ü作为排除项。

9、验证,微软输入lü正常。