调整Axios超时：提升Vue应用的请求稳定性

2023-05-27 07:11:38

在 Vue 项目中统一配置 Axios 请求超时时间

引言

在使用 Axios 库进行网络请求时，合理配置请求超时时间至关重要。它可以帮助提升应用的稳定性和效率，避免因请求超时而导致的意外错误。本文将全面探讨如何统一配置 Axios 请求超时时间，涵盖安装 Axios、创建 Axios 实例、应用到 Vue 项目、在请求中使用以及覆盖特定请求超时时间等步骤。

安装 Axios

第一步，在 Vue 项目中安装 Axios 库：

npm install axios

或

yarn add axios

创建 Axios 实例

安装完成后，创建一个 Axios 实例：

import axios from 'axios'

const axiosInstance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 5000, // 默认超时时间为 5 秒
})

实例中的 baseURL 用于设置请求的基准 URL，timeout 属性指定了默认的超时时间。

应用到 Vue 项目

将 Axios 实例应用到 Vue 项目：

import Vue from 'vue'
import axiosInstance from './axios'

Vue.prototype.$axios = axiosInstance

这样，即可在 Vue 项目中通过 this.$axios 访问 Axios 实例。

在请求中使用

在 Vue 组件中，使用 Axios 实例发送请求：

this.$axios.get('/users')
  .then((response) => {
    console.log(response.data)
  })
  .catch((error) => {
    console.log(error)
  })

覆盖特定请求超时时间

如果特定请求需要不同的超时时间，可以在请求中覆盖配置：

this.$axios.get('/users', {
  timeout: 10000 // 请求超时时间为 10 秒
})
  .then((response) => {
    console.log(response.data)
  })
  .catch((error) => {
    console.log(error)
  })