Javascript 承诺异步/等待&；从json异步数据填充表访问数据

我很难理解aysnc/await在实践中是如何工作的，我目前正试图简化我的代码并删除这个“承诺（（解决，拒绝）”我的searchlist函数中的结构，但到目前为止还无法使其正常工作。有人能帮助我理解我应该如何转换为异步等待结构吗？在这种情况下，一般解释不起作用，因此我想我遗漏了一些东西。另外，我如何以“解析”相同的方式返回“filteredata”我的代码在这一点上还有另一个问题，当填充表时，我无法访问在我的表中创建的按钮值“modify”和“delete”，它返回未定义的值

$(".modifytest").click(() => {
         console.log($(this).attr("action"));
       });) 

我怀疑这是另一个异步问题，但无法真正理解原因，因为我可以点击它。最后一个问题，除了为了简化的目的（尽管async await目前对我来说并不那么简单，参见问题1…），是否有一种做异步调用的最佳方法，即我应该以某种方式支持并学习性能（异步/等待或承诺，就像我现在做的那样）或者它只是相同的性能和不同代码的操作？ 很长的问题，非常感谢您的帮助

$(document).ready(function() {
    let table = document.getElementById("myTable");

    function buildTable(data) {
      table.innerHTML = "";
      console.log(data);
      for (var i = 0; i < data.length; i++) {
        var row = `<tr>
                       <td>${data[i].id}</td>
                       <td>${data[i].name}</td>
                       <td>${data[i].price}</td>
                       <td>${data[i].digital}</td>
                       <td><button class= "${data[i].id} btn btn-primary modifytest " abc = "test1" action = "delete"> Delete </button> </td>
                       <td><button class= "${data[i].id} btn btn-primary modifytest " abc=  "test2" action = "modify"> Modify </button> </td>                       </tr>`;
        table.innerHTML += row;
      }
    }

    let search = document.getElementById("search-input");
    search.addEventListener("keyup", function() {
      let value = this.value;

      searchlist(value).then(filteredData => {
        buildTable("");
        buildTable(filteredData);

        $(".modifytest").click(() => {
          console.log($(this).attr("action"));
        });
      });
    });

    function searchlist(value) {
      return new Promise((resolve, reject) => {
        var filteredData = [];
        $.ajax({
          method: "GET",
          dataType: "JSON",
          headers: {
            "X-CSRFToken": csrftoken
          },
          url: "http://127.0.0.1:8000/productlist/",
          success: function(response) {
            for (let i = 0; i < response.length; i++) {
              let name = response[i].name.toLowerCase();
              if (name.includes(value)) {
                filteredData.push(response[i]);
              }
              resolve(filteredData);
            }
          }
        });
      });
    }
  });

$（文档）.ready（函数（）{
let table=document.getElementById（“myTable”）；
函数构建表（数据）{
table.innerHTML=“”；
控制台日志（数据）；
对于（变量i=0；i{
构建表（“”）；
构建表（filteredData）；
$（“.modifytest”）。单击（（）=>{
log（$（this.attr（“action”））；
});
});
});
函数搜索列表（值）{
返回新承诺（（解决、拒绝）=>{
变量filteredData=[]；
$.ajax({
方法：“获取”，
数据类型：“JSON”，
标题：{
“X-CSRFToken”：CSRFToken
},
url:“http://127.0.0.1:8000/productlist/",
成功：功能（响应）{
for（设i=0；i

async

/

await

并没有摆脱

new Promise（）

，它摆脱了

.then（）

。但是，在您的情况下，您可以摆脱

新承诺

，使用

then

而不是

成功

回调。