Premise

有这样的一个场景，上传 图片/视频 时，选择完了先不让它上传，提交时上传

这种情况则可以将其先转为blobUrl的形式，再将blobUrl丢到src属性下以供展示

这里为了将异步操作转化为同步，所以需要用到Premise （reader.onload

const fileToBlobUrl = (file) => {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = (event) => {
      let blob = new Blob([event.target.result], {type: file.type});
      window.URL = window.URL || window.webkitURL;
      resolve(window.URL.createObjectURL(blob));
    }
  })
}

早期我的js代码 await 遍地，这样做保证了同步，但是像页面加载之类的很多数据其实都是无关联的，这种地方加上await则会导致页面加载时间偏长

eg

await this.loadData(id);
await this.loadRecords(id);
this.loading = false

before

const loadFn1 = () => {
    return new Promise(async (resolve) => {
        console.log('run fn1 at: ' + new Date().getTime())
        await this.loadData(id);
        resolve()
    })
}
const loadFn2 = () => {
    return new Promise(async (resolve) => {
        console.log('run fn2 at: ' + new Date().getTime())
        await this.loadRecords(id);
        resolve()
    })
}

Promise.all([loadFn1(), loadFn2()]).then(() => {
    console.log('end at: ' + new Date().getTime())
    this.loading = false;
})

这里分别对应了两个请求，修改之前是同步执行的，即串行， loadData 中的请求完成之后才会执行 loadRecords 中的请求，修改后的则是两个请求并行

数据量很大的情况下，这种看似不起眼的优化就会显得尤为重要了

Another

Js中对象取动态key的值，可以使用 Object[key] 的方式进行处理 🥱

以下大概算是一个治疗强迫症的过程 💦

在使用Vue2时，可能偶尔会用到 this.$refs 来调用或者操作子组件中的函数/属性

// 例如
this.$refs.preview.close()

通过修改引入方式解决

如果引入的是一个全局组件（以@引入），WebStrom则会提示close函数找不到

import FileUploadAndProgress from "@/components/global/FileUploadAndProgress";

替换引入方式后则不会有警告提示

import FileUploadAndProgress from "../../../../../components/global/FileUploadAndProgress";

另一种解决方式

则是开头所提到的，输出 this.$refs.preview 可以看到

colse 也是组件对象中的一个属性

于是 🤨

this.$refs.preview['close']()

Ex - ploooosion！