Thời gian chờ yêu cầu API tìm nạp?

Tôi có một fetch-api POSTyêu cầu:

fetch(url, {
  method: 'POST',
  body: formData,
  credentials: 'include'
})

Tôi muốn biết thời gian chờ mặc định cho việc này là gì? và làm thế nào chúng tôi có thể đặt nó thành một giá trị cụ thể như 3 giây hoặc giây vô định?

Chỉnh sửa 1

Như đã chỉ ra trong nhận xét, mã trong câu trả lời ban đầu tiếp tục chạy bộ đếm thời gian ngay cả sau khi lời hứa được giải quyết / từ chối.

Đoạn mã dưới đây khắc phục sự cố đó.

function timeout(ms, promise) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      reject(new Error('TIMEOUT'))
    }, ms)

    promise
      .then(value => {
        clearTimeout(timer)
        resolve(value)
      })
      .catch(reason => {
        clearTimeout(timer)
        reject(reason)
      })
  })
}

Câu trả lời ban đầu

Nó không có một mặc định cụ thể; đặc điểm kỹ thuật không thảo luận về thời gian chờ.

Bạn có thể triển khai trình bao bọc thời gian chờ của riêng mình cho các lời hứa nói chung:

// Rough implementation. Untested.
function timeout(ms, promise) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      reject(new Error("timeout"))
    }, ms)
    promise.then(resolve, reject)
  })
}

timeout(1000, fetch('/hello')).then(function(response) {
  // process response
}).catch(function(error) {
  // might be a timeout error
})

Như được mô tả trong https://github.com/github/fetch/issues/175 Nhận xét của https://github.com/mislav

Tôi thực sự thích cách tiếp cận rõ ràng từ ý chính này bằng cách sử dụng Promise.race

fetchWithTimeout.js

export default function (url, options, timeout = 7000) {
    return Promise.race([
        fetch(url, options),
        new Promise((_, reject) =>
            setTimeout(() => reject(new Error('timeout')), timeout)
        )
    ]);
}

main.js

import fetch from './fetchWithTimeout'

// call as usual or with timeout as 3rd argument

fetch('http://google.com', options, 5000) // throw after max 5 seconds timeout error
.then((result) => {
    // handle result
})
.catch((e) => {
    // handle errors and timeout error
})

Sử dụng AbortController , bạn sẽ có thể thực hiện việc này:

const controller = new AbortController();
const signal = controller.signal;

const fetchPromise = fetch(url, {signal});

// 5 second timeout:
const timeoutId = setTimeout(() => controller.abort(), 5000);


fetchPromise.then(response => {
  // completed request before timeout fired

  // If you only wanted to timeout the request, not the response, add:
  // clearTimeout(timeoutId);
})

Dựa trên câu trả lời xuất sắc của Endless ' , tôi đã tạo một chức năng tiện ích hữu ích.

const fetchTimeout = (url, ms, { signal, ...options } = {}) => {
    const controller = new AbortController();
    const promise = fetch(url, { signal: controller.signal, ...options });
    if (signal) signal.addEventListener("abort", () => controller.abort());
    const timeout = setTimeout(() => controller.abort(), ms);
    return promise.finally(() => clearTimeout(timeout));
};

1. Nếu hết thời gian chờ trước khi tài nguyên được tìm nạp thì quá trình tìm nạp sẽ bị hủy bỏ.
2. Nếu tài nguyên được tìm nạp trước khi hết thời gian chờ thì thời gian chờ sẽ bị xóa.
3. Nếu tín hiệu đầu vào bị hủy bỏ thì quá trình tìm nạp bị hủy bỏ và thời gian chờ bị xóa.

const controller = new AbortController();

document.querySelector("button.cancel").addEventListener("click", () => controller.abort());

fetchTimeout("example.json", 5000, { signal: controller.signal })
    .then(response => response.json())
    .then(console.log)
    .catch(error => {
        if (error.name === "AbortError") {
            // fetch aborted either due to timeout or due to user clicking the cancel button
        } else {
            // network error or json parsing error
        }
    });

Hy vọng rằng sẽ giúp.

chưa có hỗ trợ hết thời gian chờ trong API tìm nạp. Nhưng nó có thể đạt được bằng cách gói nó trong một lời hứa.

ví dụ.

  function fetchWrapper(url, options, timeout) {
    return new Promise((resolve, reject) => {
      fetch(url, options).then(resolve, reject);

      if (timeout) {
        const e = new Error("Connection timed out");
        setTimeout(reject, timeout, e);
      }
    });
  }

CHỈNH SỬA : Yêu cầu tìm nạp sẽ vẫn chạy trong nền và rất có thể sẽ ghi lại lỗi trong bảng điều khiển của bạn.

Quả thực là Promise.racecách tiếp cận tốt hơn.

Xem liên kết này để tham khảo Promise.race ()

Cuộc đua có nghĩa là tất cả các Lời hứa sẽ chạy cùng một lúc và cuộc đua sẽ dừng lại ngay khi một trong các Lời hứa trả về giá trị. Do đó, chỉ một giá trị sẽ được trả về . Bạn cũng có thể chuyển một hàm để gọi nếu quá trình tìm nạp hết thời gian.

fetchWithTimeout(url, {
  method: 'POST',
  body: formData,
  credentials: 'include',
}, 5000, () => { /* do stuff here */ });

Nếu điều này thu hút sự quan tâm của bạn, một triển khai khả thi sẽ là:

function fetchWithTimeout(url, options, delay, onTimeout) {
  const timer = new Promise((resolve) => {
    setTimeout(resolve, delay, {
      timeout: true,
    });
  });
  return Promise.race([
    fetch(url, options),
    timer
  ]).then(response => {
    if (response.timeout) {
      onTimeout();
    }
    return response;
  });
}

Bạn có thể tạo một trình bao bọc thời gian chờ

function timeoutPromise(timeout, err, promise) {
  return new Promise(function(resolve,reject) {
    promise.then(resolve,reject);
    setTimeout(reject.bind(null,err), timeout);
  });
}

Sau đó, bạn có thể kết thúc bất kỳ lời hứa nào

timeoutPromise(100, new Error('Timed Out!'), fetch(...))
  .then(...)
  .catch(...)  

Nó sẽ không thực sự hủy kết nối cơ bản nhưng sẽ cho phép bạn hết thời gian thực hiện một lời hứa.
Tài liệu tham khảo

Nếu bạn chưa định cấu hình thời gian chờ trong mã của mình, Nó sẽ là thời gian chờ yêu cầu mặc định của trình duyệt của bạn.

1) Firefox - 90 giây

Gõ about:configtrong lĩnh vực Firefox URL. Tìm giá trị tương ứng với khóanetwork.http.connection-timeout

2) Chrome - 300 giây

Nguồn

  fetchTimeout (url,options,timeout=3000) {
    return new Promise( (resolve, reject) => {
      fetch(url, options)
      .then(resolve,reject)
      setTimeout(reject,timeout);
    })
  }

Sử dụng c-promise2 lib, tìm nạp có thể hủy bỏ với thời gian chờ có thể trông giống như sau (Bản trình diễn jsfiddle trực tiếp ):

import CPromise from "c-promise2"; // npm package

function fetchWithTimeout(url, {timeout, ...fetchOptions}= {}) {
    return new CPromise((resolve, reject, {signal}) => {
        fetch(url, {...fetchOptions, signal}).then(resolve, reject)
    }, timeout)
}
        
const chain = fetchWithTimeout("https://run.mocky.io/v3/753aa609-65ae-4109-8f83-9cfe365290f0?mocky-delay=10s", {timeout: 5000})
    .then(request=> console.log('done'));
    
// chain.cancel(); - to abort the request before the timeout

Mã này dưới dạng tìm nạp cp npm