在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 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 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
Php获取金书网的书名的实现代码
2010/06/11 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
tagName的使用,留一笔
2006/06/26 Javascript
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
Javascript实现单例模式
2016/01/24 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Python下载指定页面上图片的方法
2016/05/12 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
python实现最速下降法
2020/03/24 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
Python实现区域填充的示例代码
2021/02/03 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
出国留学介绍信
2014/01/13 职场文书
年终奖发放方案
2014/06/02 职场文书
暑期培训班策划方案
2014/08/26 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
追悼会答谢词范文
2015/09/29 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers