错误：主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响

Question

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

错误：主线程上的同步 XMLHttpRequest 已弃用 因为它对最终用户的体验产生不利影响。

我知道这个错误是因为我设置了 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;
   }

您可以签入代码，在signTransaction() 首先我需要来自getNonce() 函数的随机数，然后可以更进一步。所以，我将 async false 设置为这个函数。 有人可以帮我解决这个问题吗？

Answer 1

每MDN:

Do not use synchronous requests outside Web Workers.

您可以调整两个函数之间的逻辑，以便定义 signTransaction() 以接收 XML 请求的输出，然后将 signTransaction 嵌套在 getNonce 中。从这个意义上说，getNonce 成为控制器，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 语法来利用 Promise 并在异步操作完成期间产生程序流：

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);
}