Cara menggunakan Promise.race untuk menambah tamat masa untuk mengambil panggilan

API pengambilan sangat berguna untuk membuat permintaan rangkaian, tetapi ia tidak disertakan dengan ciri tamat masa terbina dalam. Ini bermakna apl anda mungkin digantung selama-lamanya jika rangkaian perlahan atau pelayan tidak bertindak balas.

Nasib baik JavaScript ialah bahasa serba boleh, berpusat pada pengaturcaraan dipacu acara, menyediakan satu set fungsi utiliti yang dikumpulkan dalam objek Promise. Menggunakan kaedah Promise.race, kami boleh membuat mekanisme tamat masa untuk panggilan pengambilan kami. Dengan cara ini, kami boleh memastikan aplikasi kami responsif, walaupun perkara tidak berjalan seperti yang dirancang dengan rangkaian.

Jadi, saya akan membimbing anda tentang cara melaksanakan tamat masa ini menggunakan Promise.race. Kami akan mulakan dengan contoh pengambilan mudah dan kemudian meningkatkannya dengan menambahkan tamat masa. Saya juga akan berkongsi senario dunia sebenar di mana kami berurusan dengan token CSRF untuk menunjukkan kepada anda cara kaedah ini berfungsi dalam konteks yang selamat.

Anggap kita ada ini:

// Prepare fetch options
const options = {
    method: method,
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrfToken
    },
    body: JSON.stringify({items})
};

// Make the fetch request
const response = await fetch(fetchUrl, options);

Jika kami ingin menambah mekanisme tamat masa untuk diambil, kami boleh membuat janji dengan tamat masa yang mencetuskan penolakan. Janji menggunakan Promise.race, untuk menjalankan pelbagai janji dan apabila seseorang selesai dengan penolakan atau azam, menghentikan semua yang lain.

// Timeout mechanism for fetch
const fetchWithTimeout = (url, options, timeout = 5000) => {
    return Promise.race([
        fetch(url, options),
        new Promise((_, reject) => setTimeout(() => reject(new Error('Request timed out')), timeout))
    ]);
};

// Make the fetch request
const response = await fetchWithTimeout(fetchUrl, options);

Berikut ialah contoh dunia sebenar dengan token CSRF

// Validate CSRF token
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
if (!csrfToken) {
    throw new Error('CSRF token not found in the document.');
}

// Prepare fetch options
const options = {
    method: method,
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrfToken
    },
    body: JSON.stringify({items})
};

// Timeout mechanism for fetch
const fetchWithTimeout = (url, options, timeout = 5000) => {
    return Promise.race([
        fetch(url, options),
        new Promise((_, reject) => setTimeout(() => reject(new Error('Request timed out')), timeout))
    ]);
};

// Make the fetch request
const response = await fetchWithTimeout(fetchUrl, options);

Atas ialah kandungan terperinci Cara menggunakan Promise.race untuk menambah tamat masa untuk mengambil panggilan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!