在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 相关文章推荐
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 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
我的论坛源代码(五)
2006/10/09 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
python多线程用法实例详解
2015/01/15 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
广告学毕业生求职信
2014/01/30 职场文书
班主任对学生的评语
2014/04/26 职场文书
爱国演讲稿400字
2014/05/07 职场文书
百日安全生产活动总结
2014/07/05 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
公司员工离职证明书
2014/10/04 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
民事答辩状范本
2015/05/21 职场文书
学生会主席任命书
2015/09/21 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python