在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 立即调用的函数表达式如何写
Jan 12 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
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
php中使用base HTTP验证的方法
2015/04/20 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
Python重新加载模块的实现方法
2018/10/16 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
人力资源专员自我评价怎么写
2013/09/19 职场文书
怎么写好自荐信
2013/10/30 职场文书
工作表现自我评价
2014/02/08 职场文书
学习标兵获奖感言
2014/02/20 职场文书
酒鬼酒广告词
2014/03/21 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
五年级上册复习计划
2015/01/19 职场文书
初中班主任教育随笔
2015/08/15 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android