JAVASCRIPT警告：主线程上的同步XMLHttpRequest已被弃用，因为它会对最终用户产生有害影响；经验

我正在尝试构建一个简单的字典chrome扩展。我在网上找到了这个API，通过HTTP请求获取了一个包含单词细节的字符串，并将该字符串解析为JSON对象。但是当我使用扩展时，我得到了关于同步XMLHttpRequest的警告。我已提供以下代码：

manifest.json

{
    "name": "Dictionary Extension",
    "version": "1.0",
    "description": "Finds the meaning of the word entered by user",
    "browser_action": {
        "default_title": "Hello there! What is it that you're looking for",
        "default_popup": "popup.html",
        "default_icon": {
          "16": "dic.png",
          "32": "dic.png"
        }
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["popup.js"]
      }
    ],
    "manifest_version": 2
}

{
“名称”：“字典扩展名”，
“版本”：“1.0”，
“说明”：“查找用户输入的单词的含义”，
“浏览器操作”：{
“默认标题”：“你好！你在找什么”，
“默认弹出窗口”：“popup.html”，
“默认_图标”：{
“16”：“dic.png”，
“32”：“dic.png”
}
},
“内容脚本”：[
{
“匹配项”：[“”]，
“js”：[“popup.js”]
}
],
“清单版本”：2
}

变量url=”https://api.dictionaryapi.dev/api/v2/entries/en_US"
var输入=document.getElementById（“输入”）；
var按钮=document.getElementById（“btn”）；
var mat=document.getElementById（“材料”）；
函数httpGet（theUrl）{
var xmlHttp=new XMLHttpRequest（）；
open（“GET”，theUrl，false）；//对于同步请求为false
xmlHttp.send（空）；
返回xmlHttp.responseText；
}
addEventListener（“单击”，函数（）{
mat.innerHTML=“”；
var val=输入值；
var temp_url=url+“/”+val；
var json_data=httpGet（临时url）；
var data=JSON.parse（JSON_数据）；
var l=数据[0].meansions.length；
对于（变量i=0；i

找到意义
你好！你在找什么？
输入单词
找到意义
查看async/await和Promissions，但您需要做的基本更改是：

button.addEventListener("click", async function() {
    // ...
    var json_data = await httpGet(temp_url);
    // ...
})

function httpGet(theUrl) {
  return new Promise((resolve, reject) => {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onload = function () {
        if (this.status >= 200 && this.status < 300) {
            resolve(xmlHttp.response);
        } else {
            reject({
                status: this.status,
                statusText: xmlHttp.statusText
            });
        }
    };
    xmlHttp.open("GET", theUrl, true); // true for asynchronous request
    xmlHttp.send(null);
  });
}

按钮。addEventListener（“单击”，异步函数（）{
// ...
var json_data=wait httpGet（临时url）；
// ...
})
函数httpGet（theUrl）{
返回新承诺（（解决、拒绝）=>{
var xmlHttp=new XMLHttpRequest（）；
xmlHttp.onload=函数（）{
如果（this.status>=200&&this.status<300）{
解析（xmlHttp.response）；
}否则{
拒绝({
状态：这个状态，
statusText:xmlHttp.statusText
});
}
};
open（“GET”，theUrl，true）；//对于异步请求为true
xmlHttp.send（空）；
});
}
如果我可以对代码进行重构/现代化，我会这样做（使用api而不是旧的XMLHttpRequest）


consturl=”https://api.dictionaryapi.dev/api/v2/entries/en_US/"
const[form，material]=document.queryselectoral（“form，#material”）；
//使用form.onsubmit比btn.onclick更好
//将允许在触发此函数之前验证表单
addEventListener（“提交”，异步函数（evt）{
evt.preventDefault（）
//使用可以等待的基于承诺的获取API
const res=wait fetch（url+form.elements.word.value）
//选择返回json而不是解析字符串
const data=await res.json（）
material.innerHTML=“”
//因为…的循环使它更容易
for（数据[0]的常量含义）{
常量h1=document.createElement（'h2'）
const list=document.createElement（'ol'）
//使用innerText更安全
h1.innerText=means.partOfSpeech
材料。附加（h1）
for（含义的常量定义。定义）{
const li=document.createElement（'li'）
li.innerText=def.definition
列表。追加（li）
}
材料。附加（列表）
}
})
你好！你在找什么？
输入单词
找到意义
感谢您的输入。现在它运行良好。但对于不存在的词语，它给出了一个错误；未兑现的（允诺的）#。我搜索了一下，发现它是关于捕捉错误（错误处理）的。你能带我到这里吗？谢谢