vue3 axios请求超时

你可以尝试给 Axios 实例传入一个 `timeout` 选项来设置请求超时时间，例如：

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

如果请求超时后需要做一些特殊的处理，可以在 `catch` 方法中处理 `error.code === 'ECONNABORTED'` 的情况，例如：

instance.get('/api/foo')
  .then(response => console.log(response))
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.log('请求超时')
    } else {
      console.log(error)
    }
  })

相关问题

vue3 axios请求封装

### Vue3 中 Axios 请求封装的最佳实践

#### 创建 Axios 实例并配置默认选项

为了提高代码的可维护性和复用性，通常会创建一个独立的文件来初始化和配置 Axios 实例。这一步骤可以集中管理所有的 HTTP 配置。

// src/utils/axios.js
import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 设置基础URL
  timeout: 5000                         // 超时时间 (毫秒)
});

#### 添加请求拦截器

在发送请求之前可以通过请求拦截器对请求做预处理，比如添加认证令牌或修改请求头信息：

service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

#### 添加响应拦截器

当接收到服务器端返回的数据后，可以在响应拦截器中统一处理错误逻辑或其他通用操作：

service.interceptors.response.use(
  response => response.data,
  error => {
    console.error(`Error occurred during API call:`, error.message); 
    return Promise.reject(error);
  }
)[^1];

#### 定义API服务层

为了让业务逻辑更加清晰分离，建议定义专门的服务模块导出具体的 API 函数供页面调用：

// src/api/user.js
import request from '@/utils/axios';

export function login(data) {
  return request.post('/auth/login', data);
}

export function getUserInfo() {
  return request.get('/user/profile');
}

#### 使用 getCurrentInstance 获取组件实例

考虑到 Vue 3 组合式 API 的特性，在 setup 函数内部不再能直接访问 this 关键字指向的上下文对象。此时应该借助 Composition API 提供的方法来获取当前组件实例的相关属性和服务[^2]。

<script>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { login } from '../api/user';
import { getCurrentInstance } from "vue";

export default {
  name: 'LoginView',
  setup() {
    let loading = ref(false);

    const instance = getCurrentInstance();
    
    async function handleLogin(form) {
      try {
        loading.value = true;

        await login({ username: form.username, password: form.password });

        router.push('/');
        
      } catch (err) {
        alert(err?.message || '登录失败！');
      } finally {
        loading.value = false;
      }
    }

    return { handleLogin };
  }
};
</script>

vue封装axios超时请求

在 Vue 中封装 Axios 实现超时请求，你可以按照以下步骤进行操作：

1. 安装 Axios：首先，确保你已经安装了 Axios，可以使用以下命令进行安装：

npm install axios

2. 创建一个 axios 实例：在你的项目中，创建一个名为 `http.js`（或者其他你喜欢的名称的文件，并编写以下内容：

import axios from 'axios';

const instance =.create({
  timeout: 5000, // 设置请求超时时间，单位为毫秒
});

export default instance;

在这个文件中，我们使用 `axios.create()` 方法创建了一个实例，并设置了超时时间为 5000 毫秒（即 5 秒）。

3. 封装请求方法：在你的封装请求的文件（比如 `api.js`）中，引入 `http.js` 文件，并编写请求方法的代码，例如：

import http from './http';

export function fetchData() {
  return http.get('/api/data')
    .then(response => {
      return response.data;
    })
    .catch(error => {
      console.error(error);
      throw error;
    });
}

在这个示例中，我们使用 `http.get()` 方法发送一个 GET 请求，并返回响应数据。如果请求出现错误，我们打印错误信息并抛出异常。

这样，你就可以在 Vue 组件中使用封装的请求方法来发送请求，并且会自动处理超时。例如，在你的组件中可以这样使用：

import { fetchData } from './api';

export default {
  mounted() {
    fetchData()
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.error(error);
      });
  }
}

这样，当请求超过 5 秒钟没有返回响应时，就会触发超时错误，并打印错误信息。

记得根据你的具体需求，调整超时时间和其他配置。