JavaScript自定义超时API代码实例

让我来详细讲解“JavaScript自定义超时API代码实例”的攻略。

简介

JavaScript 是一种非常强大的脚本语言，它可以在网页上实现丰富的交互效果。但是，在某些特定的场景中，我们需要实现一些异步操作，然而又需要限制它的执行时间，这个时候就需要使用超时 API 来解决了。JavaScript 提供了一个超时机制，我们可以在一段时间内等待一个异步操作，如果超时了就中止操作，并返回超时处理结果。

超时 API

超时 API 可以使用 setTimeout() 来实现。setTimeout() 接受两个参数，第一个参数是一个函数，它将会被异步调用；第二个参数是超时时间，单位为毫秒。

下面是一个使用 setTimeout() 实现的超时 API 的代码示例：

function waitForResource(resourceUrl, timeout) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      reject(new Error('超时了'))
    }, timeout)

    fetch(resourceUrl)
      .then(response => {
        clearTimeout(timer)
        resolve(response)
      })
      .catch(error => reject(error))
  })
}

上面示例中的 waitForResource 函数接受两个参数，分别是 resourceUrl 和 timeout ，其中 resourceUrl 是需要加载的资源路径，timeout 是超时时间。

当我们调用 waitForResource 函数时，它将会返回一个 Promise 对象。如果在超时时间内成功加载了资源，那么 Promise 对象将会被 resolve，否则将被 reject，并返回一个 Error 对象。

例子

下面是两个使用超时 API 的实例。

示例一

在这个示例中，我们将会使用超时 API 来限制加载图片的时间。如果在100毫秒内没有加载完成，就认为加载超时了。

HTML 部分：

<img src="" id="image" />

JavaScript 部分：

const image = document.getElementById('image')
const loadImage = new Promise((resolve, reject) => {
  image.onload = resolve
  image.onerror = reject
  image.src = 'https://imageurl.com/image.jpg'
})

const timeout = 100
const loadWithTimeout = Promise.race([
  loadImage,
  new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error(`加载超时 (${timeout} 毫秒)`))
    }, timeout)
  }),
])

在这个示例中，我们首先通过 document.getElementById() 方法获取到了一个 <img> 元素。然后，我们创建了一个 Promise 对象 loadImage，该对象在图片加载成功或失败后将被 resolve 或 reject。

我们还创建了一个新的 Promise 对象 loadWithTimeout，这个对象使用了 Promise.race 方法。这个方法接受一个数组，当这个数组中的任意一个 Promise 被 resolve 或 reject 时，它就会返回这个 Promise 的结果，并停止其他的 Promise 的执行。在我们的示例中 loadImage 和一个新的 Promise 组合在一起。

新的 Promise 中，我们使用 setTimeout() 方法来等待加载超时。如果加载超时了，我们就会 reject 这个 Promise，返回一个 Error 对象。否则，我们将会继续等待图片 load 事件，当图片成功加载或加载失败后，会触发 resolve 或 reject，这时，loadWithTimeout 方法就会返回这个 Promise 的结果。

示例二

在这个示例中，我们将会使用超时 API 来限制一个 Ajax 请求的时间。如果在2000毫秒内没有成功返回，就认为请求超时了。

JavaScript 部分：

function ajax(url, timeout) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url)

    const timeoutId = setTimeout(() => {
      xhr.abort()
      reject(new Error(`请求超时 (${timeout} 毫秒)`))
    }, timeout)

    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        clearTimeout(timeoutId)
        if (xhr.status === 200) {
          resolve(xhr.responseText)
        } else {
          reject(new Error(`请求失败 (${xhr.status})`))
        }
      }
    }

    xhr.onerror = () => {
      clearTimeout(timeoutId)
      reject(new Error('网络错误'))
    }

    xhr.send()
  })
}

ajax('https://api.com/data', 2000)
  .then(response => console.log(response))
  .catch(error => console.error(error))

在这个示例中，我们创建了一个重新封装的 ajax 函数。该函数接受两个参数，分别是 url 和 timeout。在函数内部，我们使用 XMLHttpRequest 对象来发送一个 GET 请求，并使用超时 API 来限制响应时间。

当请求被发送时，我们使用 setTimeout() 方法来等待响应超时。如果响应超时了，我们就会终止这个请求，并使用 reject 返回一个 Error 对象。

否则，当响应被成功返回或返回失败时，XMLHttpRequest 对象都会触发 onreadystatechange 事件。当这个事件被触发时，我们检查 readyState 是否等于 4，即是否完成响应。

如果响应已经完成，并且返回状态码为 200，则我们使用 resolve 返回响应文本。否则，我们使用 reject 返回错误信息。当然，如果请求本身遇到了网络错误，那么我们将会 reject 并返回 Error 对象。

最后，我们使用 ajax 函数来发送一个 GET 请求。在请求成功或失败的情况下，我们都可以使用 then 方法和 catch 方法来处理响应的结果。