Блог

Я видел различные ответы на этот вопрос, но у меня возникли проблемы с сопоставлением их с моей ситуацией. То, что я думаю, может быть ответом на некоторые из них, кажется старыми способами кодирования или настолько незнакомыми для меня, что я не могу понять, как реализовать их в моей ситуации.

У меня есть PHP, генерирующий файл records.json, который мое приложение должно запросить для логики нескольких методов.

 function queryRecords(recordId, requiredField) {
    $.ajax("javascript/records.json", {
        dataType: "json",
        success: callBack,
        error: function (jqXhr, textStatus, errorMessage) {
            alert("AJAX error: unable to retrieve records from records.jsonnn"   errorMessage);
        }
    });
}

function callBack(response) {
    $.each(response, function(index, records) {
        if (records["MediaItemID"] == recordId) {
            $.each(records, function(key, value) {
                if (key == requiredField) {
                    return value;
                }
            });
        }
    });
}

queryRecords("14", "MediaItemName");
  

Каждый раз, когда мне нужно запросить записи, мне нужно передать RecordID и requiredField, чтобы получить значение поля этой записи (согласно циклам в методе обратного вызова). Однако, похоже, я ограничен этим подходом, потому что я не могу передать эти значения в качестве параметров при успехе. Если я выводю на консоль в успешном выполнении, я вижу значение, но мне нужен доступ к значению за пределами успеха, и вот как далеко я продвинулся. Я видел так много страниц об этом, что у меня болит голова. Пожалуйста, вы можете помочь?

Я протестировал код, предложенный вhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function просто чтобы посмотреть, смогу ли я получить доступ к значению за пределами обещания, и это не удалось, как это всегда делалось…

 var xyz = "please";

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  xyz = resu<
  //console.log(result);
  // expected output: "resolved"
}

asyncCall();

console.log(xyz);
  

Он возвращает «пожалуйста».

Либо я не понимаю предоставленные решения, либо то, чего я пытаюсь достичь, не понимается. Я рад признать, что это проблема «меня».

Ответ был бы простым, если бы речь шла только о том, чтобы установить значение async равным false в запросе ajax, но это устарело.

Ответ таков: я сдаюсь, но только потому, что для нескольких методов, вероятно, неразумно полагаться на несколько вызовов ajax для их логики.

Поэтому вместо этого я собираюсь импортировать записи из файла json в массив, чтобы у меня всегда был доступ к данным без этой головной боли.

Попробуйте, как,

 function queryRecords(recordId, requiredField) {
  return new Promise((resolve, reject) => {
      $.ajax("javascript/records.json", {
        dataType: "json",
        success: function (response) {
          resolve(callBack(recordId, requiredField, response));
        },
        error: function (jqXhr, textStatus, errorMessage) {
            reject(errorMessage);
        }
    });
  });
}

function callBack(recordId, requiredField, response) {
  $.each(response, function(index, records) {
      if (records["MediaItemID"] == recordId) {
          $.each(records, function(key, value) {
              if (key == requiredField) {
                  return value;
              }
          });
      }
  });
}
queryRecords("14", "MediaItemName").then(response => {
  // response will contain your return value
}).catch(errorMessage => {
  alert("AJAX error: unable to retrieve records from records.jsonnn"   errorMessage);
});
  

Пример реализации,

 function queryRecords(userId) {

      return new Promise((resolve, reject) => {
          $.ajax("https://jsonplaceholder.typicode.com/todos", {
            dataType: "json",
            success: function (response) {
              resolve(callBack(userId, response));
            },
            error: function (jqXhr, textStatus, errorMessage) {
                reject(errorMessage);
            }
        });
      });
    }

    function callBack(userId, response) {
      let filteredTodos = [];
      $.each(response, function(index, todo) {
          if (todo.userId == userId) {
              filteredTodos.push(todo);
          }
      });
      return filteredTodos;
    }
           
    queryRecords(1).then(filteredTodos => {
      alert(filteredTodos);
    }).catch(errorMessage => {
      alert("AJAX error: unable to retrieve records from records.jsonnn"   errorMessage);
    });  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>