Vue 中使用 axios 拦截器实现请求超时处理

在前端开发中，经常需要对网络请求进行超时处理。Vue 框架中使用 axios 作为 HTTP 请求库，可以通过 axios 拦截器来实现请求超时处理。本文将介绍如何在 Vue 中使用 axios 拦截器来实现请求超时处理。

什么是 axios 拦截器

axios 拦截器是 axios 提供的一种机制，用于在发送请求或响应到达之前，对其进行拦截和处理。axios 提供了两种拦截器：请求拦截器和响应拦截器。请求拦截器在发送请求之前被调用，响应拦截器在响应到达之前被调用。

如何使用 axios 拦截器实现请求超时处理

我们可以通过请求拦截器来设置请求超时时间，并在超时后取消请求。以下是一个示例：

// javascriptcn.com 代码示例
import axios from 'axios'

const instance = axios.create({
  timeout: 10000 // 设置请求超时时间为 10 秒
})

instance.interceptors.request.use(config => {
  config.cancelToken = new axios.CancelToken(cancel => {
    setTimeout(() => {
      cancel('请求超时') // 超时后取消请求，并抛出错误信息
    }, config.timeout)
  })
  return config
}, error => {
  return Promise.reject(error)
})

export default instance

在上面的示例中，我们使用 axios.create 方法创建了一个 axios 实例，并设置了请求超时时间为 10 秒。在请求拦截器中，我们使用 setTimeout 来设置超时时间，并通过 cancelToken 取消请求。当请求超时时，会抛出一个错误信息。

如何使用 axios 拦截器处理请求错误

除了请求超时处理，我们还可以使用 axios 拦截器来处理其他请求错误。以下是一个示例：

// javascriptcn.com 代码示例
import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000'
})

instance.interceptors.response.use(response => {
  return response.data
}, error => {
  if (error.response) {
    // 请求已发送，服务器返回错误状态码
    console.log(error.response.data)
    console.log(error.response.status)
    console.log(error.response.headers)
  } else {
    // 请求未发送，网络错误
    console.log(error.message)
  }
  return Promise.reject(error)
})

export default instance

在上面的示例中，我们使用 axios.create 方法创建了一个 axios 实例，并设置了 baseURL。在响应拦截器中，我们对错误进行了分类处理：如果服务器返回错误状态码，我们打印出错误信息；如果网络发生错误，我们也打印出错误信息。

总结

本文介绍了如何在 Vue 中使用 axios 拦截器来实现请求超时处理和请求错误处理。通过使用 axios 拦截器，我们可以对请求和响应进行拦截和处理，从而更好地控制网络请求的行为。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65567c06d2f5e1655d0f1eb5