Sobes.tech
Middle

Сиз эмне жактырасыз: async/await же send?

sobes.tech AI

AIден жооп

Мен async/await колдонгонду жактырам.

Артыкчылыктары:

  • Окуулушу оңой: Код синхрон сыяктуу көрүнөт, бул логиканы түшүнүүнү кыйла жеңилдетет, айрыкча бир нече асинхрон операциялар менен иштөөдө.
  • Callback hell-ден кутулуу: Callback-дардын тереңдешүүсүнөн алыс болуп, кодду окуу жана тейлөө оңой болот.
  • Ката иштетүүнүн ыңгайлуулугу: try...catch блокторун колдонуп, ката иштетүүгө болот.
  • Чет өлкөлүк инструменттердин жакшы колдоосу: async/await менен асинхрондук кодду дебагдоо жана профилирлөө көбүнчө ыңгайлуу.

send методу (мүмкүн XMLHttpRequest же <form> объектинин send) маалыматтарды жиберүү үчүн колдонулат, бирок ал асинхрондуулукту башкаруу механизми эмес. send колдонулганда суроо жыйынтыгы көбүнесе окуялар (onload, onerror жана башка) аркылуу иштетилет, бул кодду callback-ориентед кылат.

async/await менен fetch сыяктуу APIлер менен иштөө табигыйраак болот:

// `async/await` менен мисал
async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP ката: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Маалымат алуу ката:", error);
    throw error;
  }
}

// Колдонуу
fetchData("https://api.example.com/data")
  .then(data => {
    console.log("Алынып жаткан маалымат:", data);
  })
  .catch(error => {
    console.error("Маалыматты иштетүүдө ката:", error);
  });

XMLHttpRequest жана окуялар аркылуу иштетүүнүн салыштырылышы:

// `XMLHttpRequest` жана окуялар менен мисал
function fetchDataXHR(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url, true); // true асинхрон кылат

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      try {
        const data = JSON.parse(xhr.responseText);
        callback(null, data);
      } catch (error) {
        callback(error, null);
      }
    } else {
      callback(new Error(`HTTP ката: ${xhr.status}`), null);
    }
  };

  xhr.onerror = function() {
    callback(new Error("Тармактык ката"), null);
  };

  xhr.send();
}

// Колдонуу
fetchDataXHR("https://api.example.com/data", function(error, data) {
  if (error) {
    console.error("Маалымат алуу ката:", error);
  } else {
    console.log("Алынып жаткан маалымат:", data);
  }
});

async/await версиясы кыска жана окуу оңой экенин белгилөө керек.