خطاهای fetch() و XMLHttp برای جلوگیری از – انجمن DEV

Summarize this content to 400 words in Persian Lang
متأسفانه از این خطاها جلوگیری نکردم. من امیدوارم که این ممکن است به دیگران کمک کند در هنگام تلاش از آنها اجتناب کنند یک صفحه وب را بدون دانلود کامل نسخه جدید به روز کنید. به نظر می رسد کدی که با آن تمام کردم کار می کند:

async function fetchDbSingle(url, str) {
const dataToSend = str;
console.log(‘fetchDbSingle: ‘ + str);

try {
const response = await fetch(url, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ },
body: dataToSend
});

if (!response.ok) {
throw new Error(‘Network response was not ok’);
}

const data = await response.json();
return data;
} catch (error) {
console.error(‘Error fetching data:’, error);
throw error; // Re-throw the error to be handled by the caller
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در انتظار در داخل یک تابع async کار می کند تا اطمینان حاصل شود که داده ها قبل از تلاش برای دسترسی به آن رسیده اند. اگر شما نیاز به فراخوانی یک تابع async از کد معمولی دارید، این نحو است .سپس:

fetchDbSingle(url, str).then(data => {
console.log(“Received data:”, data);
// Use the data here
}).catch(error => {
console.error(“Error fetching data:”, error);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اگر سعی کنید بدون استفاده از این نحو خاص به داده ها دسترسی پیدا کنید، داده ها تعریف نشده خواهند بود زیرا قبل از رسیدن به آن ها دسترسی دارید.

اگر سعی کنید به داده‌های خارج از مکان‌های علامت‌گذاری شده دسترسی داشته باشید، تعریف نشده خواهد بود.

در برنامه من fetch() یک اسکریپت PHP را فراخوانی می کند که پایگاه داده را می خواند.

در اینجا چند هشدار وجود دارد که ممکن است برای افراد با تجربه بی معنی باشد، اما ای کاش زودتر می دانستم:

توجه داشته باشید که PHP داده ها را با اکو ارسال می کند و در این حالت اکو روی صفحه نمایش داده نمی شود.
مطمئن شوید که فایل PHP شما فقط حاوی کد PHP است. بدون html اگر حاوی HTML باشد، داده های برگشتی شامل تمام HTML خواهد بود و این بسیار گیج کننده خواهد بود.
اطمینان حاصل کنید که فایل PHP (و هر فایلی که شامل آن می شود) فقط یک دستور echo دارد. (اوه، و هر فایل موجود را برای html یا اکو بررسی کنید)
Json_encode آنچه قرار است توسط اکو ارسال شود. ممکن است بخواهید جاوا اسکریپت json داشته باشید تا آن را به یک آرایه جاوا اسکریپت تبدیل کنید، اما این ضروری نیست.

اگر کسی علاقه مند است بداند چرا هشدارهای بالا را ذکر می کنم، می توانم مقاله ای در مورد اشتباهاتی که مرتکب شدم و اینکه چگونه یک هفته طول کشید تا آنها را اصلاح کنم بنویسم و ​​شما می توانید بخندید و احساس برتری کنید.

async function fetchDbSingle(url, str) {
  const dataToSend = str;
  console.log('fetchDbSingle: ' + str);

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: dataToSend
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error; // Re-throw the error to be handled by the caller
  }
}

fetchDbSingle(url, str).then(data => {
  console.log("Received data:", data);
  // Use the data here
}).catch(error => {
  console.error("Error fetching data:", error);
});