在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 相关文章推荐
js 方法实现返回多个数据的代码
Apr 30 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
vuex存取值和映射函数使用说明
Jul 24 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
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
浅谈Javascript面向对象编程
2011/11/15 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Python中字符串的格式化方法小结
2016/05/03 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python3.5运算符操作实例详解
2019/04/25 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
盛大笔试题
2016/11/05 面试题
应付会计岗位职责
2013/12/12 职场文书
中考冲刺决心书
2014/03/11 职场文书
六一儿童节活动总结
2014/08/27 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
综合测评自我评价
2015/03/06 职场文书
身份证丢失证明
2015/06/19 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
远程教育学习心得体会
2016/01/23 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python