javascript - 错误 : Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience

Question

我正在开发一个 chrome 扩展程序，在其中单击按钮时我需要来自 ajax GET 的数据，然后需要进行进一步处理。为此，我想要同步 ajax 调用，但它给了我一个错误

Error: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects on the end user's experience.

我知道这个错误是因为我设置了 async=false，但是除非并且直到我没有从 API 获取数据，否则我无法进行进一步处理。下面是我的代码:

var nonce;
window.addEventListener('load', function load(event){
    var createButton = document.getElementById('send');
    createButton.addEventListener('click', function() { 
       signTransaction('abc',12,'abc');
    });
});
function signTransaction(to,amount,inputhex){
    nonce = getNonce();
    console.log(nonce);
    tx = {
        To : to,
        PrivateKey : pri,
        Balance : amount,
        Nonce : String(nonce),
        Gas : "1",
        Type : "a64",
        Input : inputhex
    }  
    let transaction = new sdag.Signs.NewTransaction(pri,tx);
}
function getNonce() {
    var request = new XMLHttpRequest();
    request.open('GET', 'http://192.168.xx.xx:9999/getAccount?address=xxxxxxxxx', false);
    request.onload = function () {
      var data = JSON.parse(this.response);
      if (request.status >= 200 && request.status < 400) {
        nonce = data.Nonce;
      } else {
        console.log('error');
      }
    }
    // Send request
    request.send(null);
    return nonce;
   }

您可以 checkin 代码，在 signTransaction() 中，首先我需要来自 getNonce() 函数的 nonce，然后可以更进一步。因此，我为此函数设置了 async false。 有人可以帮我解决这个问题吗？

Answer 1

根据 MDN :

Do not use synchronous requests outside Web Workers.

您可以调整这两个函数之间的逻辑，例如您定义 signTransaction() 以接收 XML 请求的输出，然后将 signTransaction 嵌套在 getNonce 中。从这个意义上讲，getNonce 成为 Controller ，而 signTransaction 是返回 getNonce 的中间输出。

function signTransaction(to,amount,inputhex, nonceResponse){
    let tx = {
        To : to,
        PrivateKey : pri,
        Balance : amount,
        Nonce : String(nonce),
        Gas : "1",
        Type : "a64",
        Input : inputhex
    }  
    let transaction = new sdag.Signs.NewTransaction(pri,tx);
    return transaction


}

function getNonce(to,amount,inputhex) {
    var request = new XMLHttpRequest();
    request.open('GET', 'http://192.168.51.212:9999/getAccount? 
                         address=23471aa344372e9c798996aaf7a6159c1d8e3eac', true);
//third arg to request.open() could be omitted if intent is to process call asynchronously
    request.onload = function () {
      var data = JSON.parse(this.response);
      if (request.status >= 200 && request.status < 400) {
        nonce = data.Nonce;
        return signTransaction(to,amount,inputhex,data)
      } else {
        console.log('error');
      }
}

您还可以使用 ES6 async/await 语法在异步操作完成期间利用 promises 和 yield 程序流:

async function signTransaction(to,amount,inputhex){
    nonce = await getNonce(); // `await` call yields flow back to the thread while the other async function getNonce() is executed
    tx = {
        To : to,
        PrivateKey : pri,
        Balance : amount,
        Nonce : String(nonce),
        Gas : "1",
        Type : "a64",
        Input : inputhex
    }  
    let transaction = new sdag.Signs.NewTransaction(pri,tx);
}

async function getNonce() {
    var request = new XMLHttpRequest();
    request.open('GET', 'http://192.168.51.212:9999/getAccount?address=23471aa344372e9c798996aaf7a6159c1d8e3eac', true);
//third arg to request.open() could be omitted if intent is to process call asynchronously
    request.onload = function () {
      var data = JSON.parse(this.response);
      if (request.status >= 200 && request.status < 400) {
        nonce = data.Nonce;
        return nonce; // returning here resolves the promise that is implicitly returned from an async function with the value returned from your XML call.  This value triggers continuation of the signTransaction function with XML call result
      } else {
        console.log('error');
      }
    }
    // Send request
    request.send(null);
}