axios设置单个接口的超时时间

原创

mob64ca12d9e536 2024-01-15 03:57:41 ©著作权

文章标签 ios javascript 服务器 文章分类 iOS 移动开发

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

axios设置单个接口的超时时间

在前端开发中，我们经常会使用axios库来进行网络请求。而有时候，我们需要设置某个接口的超时时间，以便在请求时间过长时及时取消请求并给予用户反馈。本文将介绍如何使用axios来设置单个接口的超时时间，并提供相应的代码示例。

什么是超时时间

超时时间是指在请求发出后，等待服务器响应的最大时间。如果超过了这个时间，请求将会被取消，并且会触发相应的错误处理函数。

使用axios设置超时时间

在axios中，我们可以通过在请求配置中设置timeout参数来设置超时时间。timeout参数的单位是毫秒，表示的是从发送请求到服务器响应的最大等待时间。

以下是一个示例代码，演示了如何使用axios设置单个接口的超时时间为5秒：

// 引入axios库
import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  timeout: 5000, // 设置全局的超时时间为5秒
});

// 发送请求
instance.get('/api/getData', {
  timeout: 3000, // 设置当前请求的超时时间为3秒
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中，我们首先通过import语句引入了axios库，然后使用axios.create方法创建了一个axios实例，其中设置了全局的超时时间为5秒。接下来，我们使用实例的get方法发送了一个GET请求，同时设置了当前请求的超时时间为3秒。最后，我们通过then方法处理请求成功的响应，通过catch方法处理请求失败的情况。

超时时间的处理

当请求的超时时间到达后，axios会取消该请求，并触发一个错误。我们可以通过捕获这个错误来进行相应的处理。

以下是一个示例代码，演示了如何处理超时错误：

instance.get('/api/getData', {
  timeout: 3000,
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('请求已取消');
    } else {
      console.error(error);
    }
  });

在上面的代码中，我们在catch方法中判断了错误对象是否为axios的取消错误。如果是取消错误，表示请求已经被取消，我们可以根据需要进行相应的处理；如果不是取消错误，表示请求发生了其他错误，我们可以通过console.error方法将错误信息输出到控制台。