Javascript 剪贴板 API 有承诺

Question

我在剪贴板中得到了文本：

<img class="imgclass" src="path_to_file/file.png">

当我运行这段代码时：

<div id="data_from_clipboard"></div>
<button id="btn-convert" onClick="convert_from_clipboard()">Convert</button>

<div id="image"></div>

<script>
    function convert_from_clipboard(){
        navigator.clipboard.readText()
            /*Alert for accepting access to clipboard appears, user accepts*/
        .then(text => {document.getElementById("data_from_clipboard").innerHTML = text;})
            /*Code from clipbard appears here, img is visible inside this div*/
        .then(imgsrc = document.getElementsByClassName('imgclass')[0].src)
            /*Error: "Cannot read property 'src' of undefined" pointing to above line of code*/
        .then(document.getElementById("image").innerHTML = '<img src="' + imgsrc + '">')
        ;}
<script>

似乎出现了错误，因为即使用户尚未单击 "Accept" 以从剪贴板读取，代码仍处于运行ning 状态。剪贴板 API 是异步的，所以我知道我应该用承诺来做这件事，但不知道怎么做。有人可以指出我正确的方向吗？

Answer 1

您有两个语法错误：

function convert_from_clipboard(){
    navigator.clipboard.readText()
        /*Alert for accepting access to clipboard appears, user accepts*/
    .then(text => {document.getElementById("data_from_clipboard").innerHTML = text;})
        /*Code from clipbard appears here, img is visible inside this div*/
    .then(() => imgsrc = document.getElementsByClassName('imgclass')[0].src)
        /*Error: "Cannot read property 'src' of undefined" pointing to above line of code*/
    .then(() => document.getElementById("image").innerHTML = '<img src="' + imgsrc + '">')
    ;}

然后在你的第二个和第三个中接受函数作为参数你没有传递函数但是代码，没有参数的箭头函数看起来像这样：

() => 10
() => { return 10; }

第一个是 return 值为 10 的函数，第二个是带有块的箭头函数，因此您需要使用 return.

您也可以使用 single then，因为您不会在第一个和第二个 then 函数中执行任何异步代码。

function convert_from_clipboard(){
    navigator.clipboard.readText()
        /*Alert for accepting access to clipboard appears, user accepts*/
    .then(text => {
        document.getElementById("data_from_clipboard").innerHTML = text;
        imgsrc = document.getElementsByClassName('imgclass')[0].src;
        document.getElementById("image").innerHTML = '<img src="' + imgsrc + '">');
    });

请注意，我没有检查您的代码，它们可能是其他错误。

Javascript 剪贴板 API 有承诺

Javascript Clipboard API with promises

javascript

clipboard

promise