前端补课: 异步无法复制到粘贴板？！

需求：将链接复制到粘贴板，启动迅雷对资源进行下载

前端：点击按钮发送请求，document.execCommand来复制到粘贴板

---

搞起~
核心代码：

      copyTextToClipboard (text) {
        var tmpInput = document.createElement('textarea')
        tmpInput.value = text
        document.body.appendChild(tmpInput)
        tmpInput.select()
        document.execCommand('copy')
        document.body.removeChild(tmpInput)
        this.$Message.success('复制成功')
      }

由于后端接口还没有出来，前端自己随便写了个字符串进行测试，如下：

copyImgUrl () {
  this.copyTextToClipboard('哈喽哈喽')
}

command+v 成功粘贴~~ DONE。

timg.gif

---

接口出来了，对接自测

      async copyImgUrl () {
        let res = await api.fetchCopyDownLoadUrl()
        if(res){
          this.copyTextToClipboard()
        }
      }

command+v emmmm？哈？木有！！粘贴板竟然木有！！

---

耐心的断点调试，发现在document.execCommand的时候竟然打印出了 false,没有复制到任何东西。。试探性的把调用前置：

      async copyImgUrl () {
         this.copyTextToClipboard('妈咪妈咪哄！')
        let res = await api.fetchCopyDownLoadUrl()
      }

command+v 可以了。。瞬间将目光锁定到了 异步请求 await上，难道是异步的问题么？

---

一番查找后。。确实是异步问题，因为 document.execCommand的操作是同步的，并且只能读取和写入 DOM。解决方法有以下几种：

1. 使用ajax & document.execCommand
   • 将配置项的async置为false，将ajax改为同步请求
   • 缺点：document.execCommand要操作DOM；请求改为同步后会阻塞之后的操作
2. 新的 Async Clipboard API
   • await navigator.clipboard.writeText('想复制的字符串') API
   • 缺点： Chrome 66 以上才支持支持；权限相关问题 详情点此

以上

---

u=2589086344,68626002&fm=11&gp=0.gif