前端vue中怎么判断接口请求返回的时长

废话不多上代码:亲测有效

import axios from 'axios';
 
const httpPlugin = {
  install(Vue, options) {
    // 创建axios实例
    const http = axios.create({
      baseURL: options.baseURL, // 基础URL
      timeout: 10000, // 请求超时时间
      // 其他配置...
    });
 
    // 请求拦截器
    http.interceptors.request.use(config => {
    config.headers.metaTime = new Date().getTime() //首先在请求拦截中加一个时间戳(虽然不准确)
    // config.method 可以获取get或者post
    
      // 可以在这里添加请求头、处理token等
      return config;
    }, error => {
      // 请求错误处理
      return Promise.reject(error);
    });
 
    // 响应拦截器
    http.interceptors.response.use(response => {
      const res = response.data
      let endTime = new Date()
      let durtion = 0
      if (response.config.headers.metaTime && response.config.headers) {
        durtion = (endTime.getTime() - response.config.headers.metaTime)
        console.log(durtion, '请求时长')
        //这里就可以根据请求时间来做判断
      }
      // 对响应数据做处理,例如只返回data部分
      return response.data;
    }, error => {
      // 响应错误处理
      return Promise.reject(error);
    });
 
    // 将axios实例挂载到Vue原型上,实现全局调用
    Vue.prototype.$http = http;
  }
};
 
export default httpPlugin;
config.headers.metaTime = new Date().getTime() //首先在请求拦截中加一个时间戳(虽然不准确)
    // config.method 可以获取get或者post

let endTime = new Date()
      let durtion = 0
      if (response.config.headers.metaTime && response.config.headers) {
        durtion = (endTime.getTime() - response.config.headers.metaTime)
        console.log(durtion, '请求时长')
        //这里就可以根据请求时间来做判断
      }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端使用 Vue 进行接口请求时,我们可以使用一些方法来设置请求超时时间并终止当前请求。 首先,在Vue使用axios库进行接口请求。axios是一个非常强大的HTTP库,它可以用于向后端发送请求,并且具有很多配置选项,包括设置请求超时时间。 我们可以通过在axios请求设置timeout选项来设置超时时间,单位为毫秒。例如,我们可以将超时时间设置为5000毫秒(5秒): ```javascript axios.get('/api/someData', { timeout: 5000 }) .then(response => { // 处理返回的数据 }) .catch(error => { if (axios.isCancel(error)) { console.log('请求超时'); // 在这里可以进行相关处理,例如给用户提示等操作 } // 处理其他错误 }); ``` 在上面的代码,我们设置了超时时间为5秒。如果请求在5秒内没有得到响应,就会抛出一个错误。 另外,我们还可以使用 axios.CancelToken 的方式来取消请求。例如,我们可以创建一个 CancelToken 实例,然后将其作为 cancelToken 选项传递给 axios 请求: ```javascript const CancelToken = axios.CancelToken; let cancel; axios.get('/api/someData', { cancelToken: new CancelToken(function executor(c) { // executor 函数接收一个 cancel 函数作为参数 cancel = c; }) }) .then(response => { // 处理返回的数据 }) .catch(error => { if (axios.isCancel(error)) { console.log('请求被取消'); // 在这里可以进行相关处理,例如给用户提示等操作 } // 处理其他错误 }); // 通过调用 cancel 函数可以取消请求 cancel(); ``` 在上面的代码,我们创建了一个 CancelToken 实例,并将其作为 cancelToken 选项传递给请求。同时,我们可以通过调用 cancel 函数来取消请求。 综上所述,我们可以利用axios的timeout选项来设置请求超时时间,并且可以使用cancelToken来取消请求,以达到终止当前请求的目的。这样可以提高用户体验,防止长时间等待。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奋斗的小鸟鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值