vue axios 超时重发

原创

mob649e81597922 2024-07-11 05:43:26 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e81597922的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现 vue axios 超时重发

1. 整体流程

为了实现“vue axios 超时重发”的功能，我们需要按照以下步骤进行操作：

pie
    title 步骤
    "1. 创建axios实例" : 1
    "2. 设置请求超时时间" : 1
    "3. 设置拦截器" : 1
    "4. 处理超时重发逻辑" : 1

2. 具体操作步骤

2.1 创建axios实例

首先，我们需要创建一个axios实例，代码如下：

```javascript
// 引用axios库
import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: '
  timeout: 10000 // 设置默认超时时间为10秒
});

export default instance;
```markdown

在上面的代码中，我们引用了axios库，并创建了一个axios实例，设置了默认的基础URL和超时时间。

2.2 设置请求超时时间

接下来，我们需要设置请求的超时时间，代码如下：

```javascript
// 设置请求超时时间
axios.defaults.timeout = 10000; // 设置全局的超时时间为10秒
```markdown

这段代码设置了全局的请求超时时间为10秒，可以根据实际需求进行调整。

2.3 设置拦截器

然后，我们需要设置axios的请求拦截器和响应拦截器，代码如下：

```javascript
// 请求拦截器
axios.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  return config;
}, function(error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function(response) {
  // 对响应数据做点什么
  return response;
}, function(error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});
```markdown

在上面的代码中，我们设置了请求拦截器和响应拦截器，可以对请求和响应做一些处理操作。

2.4 处理超时重发逻辑

最后，我们需要在axios实例中处理超时重发的逻辑，代码如下：

```javascript
// 处理超时重发逻辑
instance.interceptors.request.use(function(config) {
  // 添加一个请求拦截器，对超时进行处理
  config.timeout = 10000; // 设置超时时间为10秒
  return config;
}, function(error) {
  return Promise.reject(error);
});
```markdown

在上述代码中，我们在axios实例中设置了一个请求拦截器，对超时进行处理，并重新发起请求。