在vue中axios设置timeout超时的操作


Posted in Javascript onSeptember 04, 2020

在做vue项目的时候,由于数据量查询比较大,所以前台调用接口数据的时候,往往要等很久,所以需要设置个超时,当超过设置时间就让向页面返回一个状态,让使用者不用一直等。

通过官网api查询,对其超时讲解不是很多,但其和Jquery中请求非常类似

Jquery请求方式

$.ajax({
 url: '接口地址',
 type:'get', //请求方式get或post
 data:{}, //请求所传的参数
 dataType: 'json', //返回的数据格式
 timeout: 4000, //设置时间超时,单位毫秒
 success: function(result) {
 console.log('OK')
 },
 error: console.log('error')
 })

vue中请求方式:

axios.post( //请求方式
url, //接口地址
params, //传递参数
{timeout: 1000 * 60 * 2}) //设置超时,单位毫秒
.then(function(res){
 console.log(res);
}).catch((error) => {
 console.log('error')
})

所以可以再请求中通过timeout设置请求超时

补充知识:vue中用axios请求接口,处理网络失败和网络超时问题,axios拦截器

前端经常要对服务器的错误信息做处理,小编是头一次做,就遇到了很多问题

首先,是封装的请求数据的方法

import Vue from 'vue';
import axios from 'axios';
import qs from 'qs';
import wx from 'weixin-js-sdk';
import {
 Toast
} from 'mint-ui';

axios.defaults.timeout = 10000;
// 拦截
axios.interceptors.request.use(function (config) {
 return config
}, function (error) {
 return Promise.reject(error);
})
axios.interceptors.response.use(
 response => {
 if (typeof(response) != 'String'&&response.data.errno !== 0 && response.config.url.indexOf('searchorderoyidornumber') < 0 && response.config.url.indexOf('upload') < 0) {
  response.data['data'] = response.data['data'] || {};
  Toast(response.data.errmsg)
 }
 if (typeof(response) != 'String'&&response.data.errno == 3521) {
  localStorage.clear();
  location.href = '#/login'
 }
 return response.status == 200 ? response.data : response;
 // return response
 },
 error => {
 //String(error).toLowerCase().indexOf('timeout')
 if (error && error.stack.indexOf('timeout') > -1) {
  Toast('请求超时')
 }
 // let config = error.config;
 // if (!config || !config.retry) return Promise.reject(err);
 // config.__retryCount = config.__retryCount || 0;

 // // Check if we've maxed out the total number of retries
 // if (config.__retryCount >= config.retry) {
 // // Reject with the error
 // return Promise.reject(err);
 // }

 // // Increase the retry count
 // config.__retryCount += 1;

 // // Create new promise to handle exponential backoff
 // var backoff = new Promise(function (resolve) {
 // setTimeout(function () {
 //  resolve();
 // }, config.retryDelay || 1);
 // });

 // // Return the promise in which recalls axios to retry the request
 // return backoff.then(function () {
 // return axios(config);
 // });
 }
);
let axios_post = function (url, params) {
 return new Promise((resolve, reject) => {
 if (!localStorage.getItem('token') || localStorage.getItem('token') == '') {
  axios.get('/gettoken').then((res) => {
  localStorage.setItem('token', res.data.token)
  axios.post(url, qs.stringify(params),
  {
   headers: {
   'Content-Type': 'application/x-www-form-urlencoded'
   }
  }).then(res => {
   resolve(res)
  }).catch(err => {
   reject(err)
  })
  }).catch(err => {
  reject(err)
  })
 } else {
  params = url.indexOf('login') > -1 ? {
  ...params,
  _token: localStorage.getItem('token')
  } : {
  ...params,
  _token: localStorage.getItem('token'),
  S: localStorage.getItem('S'),
  U: localStorage.getItem('U')
  }
  let options = {};
  options['maxContentLength'] = 1024000000;
  if(url.indexOf('uplpoad') > -1){
  options['timeout'] = 1000 * 30;
  }
  axios.post(url, params, options).then(res => {
  resolve(res)
  }).catch(err => {
  reject(err)
  })
 }
 })
}
let axios_get = function (url, params) {
 let _params = typeof (params) == 'object' ? params : {}
 _params = {
 ..._params,
 S: localStorage.getItem('S'),
 U: localStorage.getItem('U')
 }
 return new Promise((resolve, reject) => {
 axios.get(url, {
  'params': _params
 }).then(res => {
  if (res.errno !== 0) {
  reject(res)
  }
  resolve(res)
 }).catch(err => {
  reject(err)
 })
 })
}
let getCookie = function(cookieName) {
 var cookieValue = "";
 if (document.cookie && document.cookie != '') {
  var cookies = decodeURIComponent(document.cookie).split(';');
  for (var i = 0; i < cookies.length; i++) {
   var cookie = cookies[i].trim();
   // if (cookie.substring(0, cookieName.length + 1).trim() == cookieName.trim() + "=") {
   //  cookieValue = cookie.substring(cookieName.length + 1, cookie.length);
   //  break;
   // }
   var cookie = cookies[i].trim();
   var cookieArr = cookie.split('=');
   if(cookieArr[0] == cookieName.trim()){
    cookieValue = cookieArr[1];
    break;
   }
  }
 }
 return cookieValue;
}

let setCookie = function(name,value){ 
 var Days = 30; 
 var exp = new Date(); 
 exp.setTime(exp.getTime() + Days*24*60*60*1000); 
 document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 

Vue.prototype.$http = axios;
Vue.prototype.$get = axios_get;
Vue.prototype.$post = axios_post;
Vue.prototype.$getCookie = getCookie;
Vue.prototype.$setCookie = setCookie;

在组件中直接this.$post()这样用即可。

以上这篇在vue中axios设置timeout超时的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
jquery实现图片预加载
Dec 25 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
js验证框架实现代码分享
May 18 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 #Javascript
JavaScript中的执行环境和作用域链
Sep 04 #Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 #Javascript
详解JavaScript数据类型和判断方法
Sep 04 #Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 #Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 #Javascript
我所理解的JavaScript中的this指向
Sep 04 #Javascript
You might like
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
javascript document.referrer 用法
2009/04/30 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
Python写的Socks5协议代理服务器
2014/08/06 Python
简单理解Python中的装饰器
2015/07/31 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python多维数组切片方法
2018/04/13 Python
Python装饰器用法实例总结
2018/05/26 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
python变量的作用域是什么
2020/05/26 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
JS原生实现轮播图的几种方法
2021/03/23 Javascript
机电一体化自荐信
2013/12/10 职场文书
心理健康教育心得体会
2013/12/29 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
四年级数学教学反思
2016/02/16 职场文书
MySQL开启事务的方式
2021/06/26 MySQL