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

本文主要是介绍前端vue中怎么判断接口请求返回的时长,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

import axios from 'axios';const httpPlugin = {install(Vue, options) {// 创建axios实例const http = axios.create({baseURL: options.baseURL, // 基础URLtimeout: 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.datalet endTime = new Date()let durtion = 0if (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或者postlet endTime = new Date()let durtion = 0if (response.config.headers.metaTime && response.config.headers) {durtion = (endTime.getTime() - response.config.headers.metaTime)console.log(durtion, '请求时长')//这里就可以根据请求时间来做判断}

这篇关于前端vue中怎么判断接口请求返回的时长的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1130103

相关文章

HTML5的input标签的`type`属性值详解和代码示例

《HTML5的input标签的`type`属性值详解和代码示例》HTML5的`input`标签提供了多种`type`属性值,用于创建不同类型的输入控件,满足用户输入的多样化需求,从文本输入、密码输入、... 目录一、引言二、文本类输入类型2.1 text2.2 password2.3 textarea(严格

Springboot3统一返回类设计全过程(从问题到实现)

《Springboot3统一返回类设计全过程(从问题到实现)》文章介绍了如何在SpringBoot3中设计一个统一返回类,以实现前后端接口返回格式的一致性,该类包含状态码、描述信息、业务数据和时间戳,... 目录Spring Boot 3 统一返回类设计:从问题到实现一、核心需求:统一返回类要解决什么问题?

SpringBoot返回文件让前端下载的几种方式

《SpringBoot返回文件让前端下载的几种方式》文章介绍了开发中文件下载的两种常见解决方案,并详细描述了通过后端进行下载的原理和步骤,包括一次性读取到内存和分块写入响应输出流两种方法,此外,还提供... 目录01 背景02 一次性读取到内存,通过响应输出流输出到前端02 将文件流通过循环写入到响应输出流

SpringBoot+Vue3整合SSE实现实时消息推送功能

《SpringBoot+Vue3整合SSE实现实时消息推送功能》在日常开发中,我们经常需要实现实时消息推送的功能,这篇文章将基于SpringBoot和Vue3来简单实现一个入门级的例子,下面小编就和大... 目录前言先大概介绍下SSE后端实现(SpringBoot)前端实现(vue3)1. 数据类型定义2.

C# WebAPI的几种返回类型方式

《C#WebAPI的几种返回类型方式》本文主要介绍了C#WebAPI的几种返回类型方式,包括直接返回指定类型、返回IActionResult实例和返回ActionResult,文中通过示例代码介绍的... 目录创建 Controller 和 Model 类在 Action 中返回 指定类型在 Action

requests处理token鉴权接口和jsonpath使用方式

《requests处理token鉴权接口和jsonpath使用方式》文章介绍了如何使用requests库进行token鉴权接口的处理,包括登录提取token并保存,还详述了如何使用jsonpath表达... 目录requests处理token鉴权接口和jsonpath使用json数据提取工具总结reques

前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

《前端VisualStudioCode安装配置教程之下载、汉化、常用组件及基本操作》VisualStudioCode是微软推出的一个强大的代码编辑器,功能强大,操作简单便捷,还有着良好的用户界面,... 目录一、Visual Studio Code下载二、汉化三、常用组件1、Auto Rename Tag2

python调用dubbo接口的实现步骤

《python调用dubbo接口的实现步骤》本文主要介绍了python调用dubbo接口的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编... 目录 ​​其他实现方式与注意事项​​ ​​高级技巧与集成​​用 python 提供 Dubbo 接口

Java中接口和抽象类的异同以及具体的使用场景

《Java中接口和抽象类的异同以及具体的使用场景》文章主要介绍了Java中接口(Interface)和抽象类(AbstractClass)的区别和联系,包括相同点和不同点,以及它们在实际开发中的具体使... 目录一、接口和抽象类的 “相同点”二、接口和抽象类的 “核心区别”关键区别详解(避免踩坑)三、具体使

mysql笛卡尔积怎么形成以及怎么避免笛卡尔积详解

《mysql笛卡尔积怎么形成以及怎么避免笛卡尔积详解》笛卡尔积是指两个集合中所有可能的有序对的集合,在数据库中它表示两个表的每一行都与另一个表的每一行组合,:本文主要介绍mysql笛卡尔积怎么形成... 目录第一部分:什么是笛卡尔积,它是如何形成的?1. 定义2. 在 mysql 中如何形成3. 笛卡尔积的