在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获取地址栏参数
Dec 22 Javascript
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
vue 数字翻牌器动态加载数据
Apr 20 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连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP简单日历实现方法
2016/07/20 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
jquery常用操作小结
2014/07/21 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
python爬取天气数据的实例详解
2020/11/20 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
C++:局部变量能否和全局变量重名
2014/03/03 面试题
若干个Java基础面试题
2015/05/19 面试题
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技