在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更优雅的兼容
Aug 12 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
微信小程序实现watch监听
Jun 04 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中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
python字符串格式化方式解析
2019/10/19 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
总经理任命书
2014/03/29 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
行政上诉状范文
2015/05/23 职场文书
详解Laravel制作API接口
2021/05/31 PHP
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL