JavaScript arama kutusunda eski API yanıtlarını engelleme

0cevap 1okunma

Yapay zekâ özeti

Forum konusu, canlı arama kutusunda hızlı kullanıcı girişleri sırasında eski API yanıtlarının yeni sonuçları ezmesini ele alıyor. Çözüm olarak önceki istekleri AbortController ile iptal etmek ve yanıtın güncel isteğe ait olduğunu istek numarasıyla doğrulamak öneriliyor. Ayrıca URL kodlaması, güvenli metin gösterimi, sunucu tarafı doğrulama ve farklı ağ koşullarında test edilmesi gereken senaryolar açıklanıyor.

Üye

0 Puan0 / 300 Puan · Sonraki: Demir 2

🏅 İlk Adım🏅 Konu Ustası

17 Ekim 2026, 01:59

Sorun: Eski yanıt neden yeni sonucu eziyor?

Canlı arama kutusunda kullanıcı hızlı yazdığında her

input

olayı yeni bir

fetch()

isteği başlatabilir. Örneğin

ka

sorgusu için gönderilen istek,

kali

sorgusundan sonra yanıtlanırsa eski sonuçlar ekrana yazılabilir. Sorun CSS düzeninden veya form erişilebilirliğinden değil, ağ yanıtlarının gönderilme sırasından kaynaklanır.

İki önlem birlikte kullanılabilir: Önceki isteği

AbortController

ile iptal etmek ve yanıt geldiğinde hâlâ geçerli isteğe ait olup olmadığını kontrol etmek. İptal her zaman zamanında gerçekleşmeyebileceği için istek numarası kontrolü önemlidir.

AbortController ve istek numarasıyla çözüm


const input = document.querySelector('#search');
const results = document.querySelector('#results');

let controller = null;
let requestNo = 0;

input.addEventListener('input', async () => {
  const term = input.value.trim();
  const currentRequest = ++requestNo;

  if (controller) {
    controller.abort();
  }

  if (term.length < 2) {
    results.textContent = 'En az iki karakter yazın.';
    return;
  }

  controller = new AbortController();
  results.textContent = 'Aranıyor...';

  try {
    const response = await fetch(
      `/api/search?q=${encodeURIComponent(term)}`,
      { signal: controller.signal }
    );

    if (!response.ok) {
      throw new Error('Arama isteği başarısız oldu.');
    }

    const data = await response.json();

    // Yanıt eski bir isteğe aitse ekrana yazma.
    if (currentRequest !== requestNo) return;

    results.textContent = data.items.length
      ? data.items.map(item => item.name).join(', ')
      : 'Sonuç bulunamadı.';
  } catch (error) {
    // Kullanıcının yeni yazdığı metin nedeniyle iptal edilen isteği hata gibi gösterme.
    if (error.name === 'AbortError') return;

    if (currentRequest === requestNo) {
      results.textContent = 'Sonuçlar alınamadı.';
    }
  }
});

Kodda dikkat edilmesi gereken noktalar

```
encodeURIComponent()
```
, sorgunun URL parametresinde özel karakterlerle bozulmasını önler; sunucu tarafı doğrulamanın yerine geçmez.
```
AbortController
```
önceki isteğin ağ çalışmasını durdurmayı dener. Buna rağmen ulaşan bir yanıt olursa
```
requestNo
```
kontrolü eski verinin uygulanmasını engeller.
Sonuçları
```
textContent
```
ile yazmak, API’den gelen metnin HTML olarak yorumlanmasını önler. HTML üretmek gerekiyorsa içerik ayrıca güvenli biçimde arındırılmalıdır.
API, sorguyu sunucuda doğrulamalı; veritabanı işlemlerinde parametreli sorgular kullanmalı ve aşırı istekler için uygun hız sınırlaması değerlendirmelidir.

Test senaryoları

Geliştirici araçlarında ağ hızını yavaşlatın ve arama kutusuna art arda farklı ifadeler yazın. Yanıtların farklı sırada dönmesini sağlayarak yalnızca son ifadenin sonuçlarının göründüğünü kontrol edin.

İki karakterden kısa veya tamamen boş girişte uygun bilgilendirme gösterilmeli.
Sonuç bulunamadığında boş liste mesajı görünmeli.
HTTP hata kodunda yalnızca güncel isteğe ait hata mesajı gösterilmeli.
Yeni yazım nedeniyle iptal edilen istek, kullanıcıya gereksiz hata olarak yansımamalı.
Ağ bağlantısı kesildiğinde arama alanı çalışmaya devam etmeli ve kullanıcı anlaşılır bir durum mesajı görmeli.

Beklenen sonuç, yanıtların hangi sırayla geldiğinden bağımsız olarak ekranda yalnızca kullanıcının son arama ifadesine ait verilerin bulunmasıdır.

[b]Sorun: Eski yanıt neden yeni sonucu eziyor?[/b]

Canlı arama kutusunda kullanıcı hızlı yazdığında her [code]input[/code] olayı yeni bir [code]fetch()[/code] isteği başlatabilir. Örneğin [code]ka[/code] sorgusu için gönderilen istek, [code]kali[/code] sorgusundan sonra yanıtlanırsa eski sonuçlar ekrana yazılabilir. Sorun CSS düzeninden veya form erişilebilirliğinden değil, ağ yanıtlarının gönderilme sırasından kaynaklanır.

İki önlem birlikte kullanılabilir: Önceki isteği [code]AbortController[/code] ile iptal etmek ve yanıt geldiğinde hâlâ geçerli isteğe ait olup olmadığını kontrol etmek. İptal her zaman zamanında gerçekleşmeyebileceği için istek numarası kontrolü önemlidir.

[b]AbortController ve istek numarasıyla çözüm[/b]

[code]
const input = document.querySelector('#search');
const results = document.querySelector('#results');

let controller = null;
let requestNo = 0;

input.addEventListener('input', async () => {
  const term = input.value.trim();
  const currentRequest = ++requestNo;

if (controller) {
    controller.abort();
  }

if (term.length < 2) {
    results.textContent = 'En az iki karakter yazın.';
    return;
  }

controller = new AbortController();
  results.textContent = 'Aranıyor...';

try {
    const response = await fetch(
      `/api/search?q=${encodeURIComponent(term)}`,
      { signal: controller.signal }
    );

if (!response.ok) {
      throw new Error('Arama isteği başarısız oldu.');
    }

const data = await response.json();

// Yanıt eski bir isteğe aitse ekrana yazma.
    if (currentRequest !== requestNo) return;

results.textContent = data.items.length
      ? data.items.map(item => item.name).join(', ')
      : 'Sonuç bulunamadı.';
  } catch (error) {
    // Kullanıcının yeni yazdığı metin nedeniyle iptal edilen isteği hata gibi gösterme.
    if (error.name === 'AbortError') return;

if (currentRequest === requestNo) {
      results.textContent = 'Sonuçlar alınamadı.';
    }
  }
});
[/code]

[b]Kodda dikkat edilmesi gereken noktalar[/b]

[list]
[*][code]encodeURIComponent()[/code], sorgunun URL parametresinde özel karakterlerle bozulmasını önler; sunucu tarafı doğrulamanın yerine geçmez.
[*][code]AbortController[/code] önceki isteğin ağ çalışmasını durdurmayı dener. Buna rağmen ulaşan bir yanıt olursa [code]requestNo[/code] kontrolü eski verinin uygulanmasını engeller.
[*]Sonuçları [code]textContent[/code] ile yazmak, API’den gelen metnin HTML olarak yorumlanmasını önler. HTML üretmek gerekiyorsa içerik ayrıca güvenli biçimde arındırılmalıdır.
[*]API, sorguyu sunucuda doğrulamalı; veritabanı işlemlerinde parametreli sorgular kullanmalı ve aşırı istekler için uygun hız sınırlaması değerlendirmelidir.
[/list]

[b]Test senaryoları[/b]

Geliştirici araçlarında ağ hızını yavaşlatın ve arama kutusuna art arda farklı ifadeler yazın. Yanıtların farklı sırada dönmesini sağlayarak yalnızca son ifadenin sonuçlarının göründüğünü kontrol edin.

[list]
[*]İki karakterden kısa veya tamamen boş girişte uygun bilgilendirme gösterilmeli.
[*]Sonuç bulunamadığında boş liste mesajı görünmeli.
[*]HTTP hata kodunda yalnızca güncel isteğe ait hata mesajı gösterilmeli.
[*]Yeni yazım nedeniyle iptal edilen istek, kullanıcıya gereksiz hata olarak yansımamalı.
[*]Ağ bağlantısı kesildiğinde arama alanı çalışmaya devam etmeli ve kullanıcı anlaşılır bir durum mesajı görmeli.
[/list]

Beklenen sonuç, yanıtların hangi sırayla geldiğinden bağımsız olarak ekranda yalnızca kullanıcının son arama ifadesine ait verilerin bulunmasıdır.

Cevaplar (0)

Bu konuya henüz yanıt yazılmamış. İlk yanıtı siz yazın!

Şu An Bu Konuyu Okuyanlar

Toplam: 1

+ 1 Ziyaretçi

Topluluğa katılın

Yanıt yazmak için giriş yapın veya hesap oluşturun.

Bu konuya yanıt verebilmek için üye hesabınızla devam edin. Hesabınız yoksa birkaç adımda kayıt olabilirsiniz.

Giriş Yap Kayıt Ol

0 alıntı seçildi