抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

Mr.wang

Time flies and people come and go

博客

归档

请注意前方有坑

Mr.wang
vue

发布于：2020年6月1日
次浏览

js逻辑上小概率会出现反人类的逻辑

火狐浏览器对于某些时间格式在new Date时会Invalid Date

1
2
3
new Date('2021/11/08 00:00:00') //正常
new Date('2021-11-08 00:00:00')  //正常
new Date('2021/11/08 00:00:00.0') //Invalid Date

IE浏览器出现

1
new Date('2021-11-08 00:00:00') //Invalid Date

自己手动配置方法转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* JSON Date 转日期 */
  jsonDate(jsonDate) {
    jsonDate = jsonDate.slice(0,19).replace(/-/g, '/');
    if (jsonDate.indexOf('T') > 0) {
      var strDate = jsonDate
        .replace(/T/g, ' ')
        .replace(/-/g, '/')
        .replace(/\.[\w+]*/, '');
      return new Date(strDate);
    } else {
      var date = new Date(jsonDate);
      return date;
    }
  }

axios请求总是跨域怎么办？

contentType: ‘application/json’ 是变成了非简单请求， 跨域配置已做，但还是报403 ，是因为网关拦截了浏览器的options请求

这个是复杂请求，后端没有对这个header做跨域配置，就会被浏览器认为是跨域。

**withCredentials:**默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据。

  • 默认值为false。
  • true：在跨域请求时，会携带用户凭证
  • false：在跨域请求时，不会携带用户凭证；返回的 response 里也会忽略 cookie

当配置了 withCredentials = true时，必须在后端增加 response 头信息Access-Control-Allow-Origin，且必须指定域名，而不能指定为*！！！

这是最近遇到的问题，后端需要带cookie过去，而前端没有设置为true，所以导致cookie没有传过去，后来发现是没有设置为true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//使用axios库时
// 是否允许跨域(此参数会导致get请求跨域)
 axios.defaults.withCredentials = true;

//post请求请注意请求头的Content-Type
//使用axios跨域发送请求，同时post发送的数据格式是json格式,返回的信息提示是跨域的问题,但后台已说明已解除跨域
//解决办法
//第一种
//设置config.headers['Content-Type'] = 'text/plain'
axios.defaults.headers.post['Content-Type'] = 'text/plain'
data:JSON.stringify(data)

//第二种
import qs from 'qs';
axios.post(url,{ method: 'post',data: qs.stringify(data)})

队友不配合存储不一致localStorage

存储localStorage时，应该保证每次存储的值都是JSON.stringify过的值，每次取出都应该JSON.parse

可设置单独的utils函数专门保存存取方法的统一

1
2
3
4
localStorage.setItem("token","wang")
localStorage.getItem("token") //=》"wang"
JSON.parse(localStorage.getItem("token"))
//error  Uncaught SyntaxError: Unexpected token w in JSON at position 0

Math.round（四舍五入）（负数）

1
2
3
4
5
6
7
Math.round(1.2) //->1
Math.round(1.8) //->2
Math.round(0) //->0
Math.round(-1.2) //->-1
Math.round(-1.5) //->-1(奇怪)
Math.round(-1.8) //->-2
Math.round(x)等同于：Math.floor(x + 0.5) floor向下取整 负数越大越小

别忽略parseInt的第二个参数

1
2
3
['1','2','3'].map(parseInt); //->[1, NaN, NaN]
['1','2','3'].map(v=>parseInt(v)); //->[1, 2, 3]
['1','2','3'].map((v,i)=>parseInt(v,i)); //->[1, NaN, NaN]

parseInt

不要相信浏览器的打印

某天，后台返回一个数据id：576460752305053383

当我在控制台console.log(id)看这个数据的时候，打印出576460752305053300,结果却不是我想要的。。。

由于后端long数据类型转化为js的数字类型时，超出17位事，会自动将超出部分转化为0

解决方法：数字类型转化为字符串

骚操作-如何一句话让你页面可编辑

1
document.body.contentEditable=true

windows和mac换行符不一样的原因导致很多警告

git的问题，默认情况下，Windows上pull的时候会自动把LF转换成CRLF，然后push 的时候CRLF会转会LF，所以要么关闭git的这个自动转换，要么prettier改一下换行符的配置

执行了git config –global core.autocrlf false命令，重新clone项目

fetch请求本地json

请求本地json 需要进行res.json 会返回一个promise 在then后返回就是数据

1
2
3
4
5
fetch("./bar.json")
        .then((res) => res.json())
        .then((data) => {
          console.log(data);
        });

谷歌浏览器保留页面跳转前的请求

开发中往往会遇到这样的情况，调试一个请求，但是请求中有报错的跳转，结果一刷新页面就自动跳转了，也看不到请求报错，这个时候只要勾选上preserver log即可

new Date（time）

当你想获取当前时间的时候

世界时间UTC

1
2
3
4
5
new Date('2021-03-05')  //Fri Mar 05 2021 08:00:00 GMT+0800 (中国标准时间)
new Date('2021-03-05').getTime() //1614902400000 //UTC+8:00
new Date('2021-3-05').getTime()  //1614873600000 //UTC
new Date('2021/03/05').getTime() //1614873600000 //UTC
new Date('2021/3/5').getTime()   //1614873600000 //UTC

Axios请求库封装问题

当我们使用axios.create创建的axios实例在使用普通的get、post、put时没问题，但是如果你使用all、spread、Cancel、CancelToken、isCancel方法，将会告诉你，方法不存在。

如果要使用all，spread，请直接引入axios进行使用

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：http://wang-z.gitee.io/2020/06/01/all-%E8%AF%B7%E6%B3%A8%E6%84%8F%E5%89%8D%E6%96%B9%E6%9C%89%E5%9D%91/

本页文档最后更新于：2022年4月13日

javascript

vue

评论