首页 >> js开发 >> js在vue中axios设置timeout超时的操作js大全
js在vue中axios设置timeout超时的操作js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
在做vue项目的时候，由于数据量查询比较大，所以前台调用接口数据的时候，往往要等很久，所以需要设置个超时，当超过设置时间就让向页面返回一个状态，让使用者不用一直等。通过官网api查询，对其超时讲解不是很多，但其和Jquery中请求非常类似Jquery请求方式Jquery请求方式
$.ajax({
url: '接口地址',
type:'get', //请求方式get或post
data:{}, //请求所传的参数
dataType: 'json', //返回的数据格式
timeout: 4000, //设置时间超时，单位毫秒
success: function(result) {
console.log('OK')
},
error: console.log('error')
})
$.ajax({
url: '接口地址',
type:'get', //请求方式get或post
data:{}, //请求所传的参数
dataType: 'json', //返回的数据格式
timeout: 4000, //设置时间超时，单位毫秒
success: function(result) {
console.log('OK')
},
error: console.log('error')
})vue中请求方式：vue中请求方式：
axios.post( //请求方式
url, //接口地址
params, //传递参数
{timeout: 1000 * 60 * 2}) //设置超时，单位毫秒
.then(function(res){
console.log(res);
}).catch((error) => {
console.log('error')
})
axios.post( //请求方式
url, //接口地址
params, //传递参数
{timeout: 1000 * 60 * 2}) //设置超时，单位毫秒
.then(function(res){
console.log(res);
}).catch((error) => {
console.log('error')
})所以可以再请求中通过timeout设置请求超时补充知识：vue中用axios请求接口，处理网络失败和网络超时问题,axios拦截器补充知识：补充知识：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;
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超时的操作就是小编分享给大家的全部内容了，希望能给大家一个参考。
$.ajax({
url: '接口地址',
type:'get', //请求方式get或post
data:{}, //请求所传的参数
dataType: 'json', //返回的数据格式
timeout: 4000, //设置时间超时，单位毫秒
success: function(result) {
console.log('OK')
},
error: console.log('error')
})
$.ajax({
url: '接口地址',
type:'get', //请求方式get或post
data:{}, //请求所传的参数
dataType: 'json', //返回的数据格式
timeout: 4000, //设置时间超时，单位毫秒
success: function(result) {
console.log('OK')
},
error: console.log('error')
})vue中请求方式：vue中请求方式：
axios.post( //请求方式
url, //接口地址
params, //传递参数
{timeout: 1000 * 60 * 2}) //设置超时，单位毫秒
.then(function(res){
console.log(res);
}).catch((error) => {
console.log('error')
})
axios.post( //请求方式
url, //接口地址
params, //传递参数
{timeout: 1000 * 60 * 2}) //设置超时，单位毫秒
.then(function(res){
console.log(res);
}).catch((error) => {
console.log('error')
})所以可以再请求中通过timeout设置请求超时补充知识：vue中用axios请求接口，处理网络失败和网络超时问题,axios拦截器补充知识：补充知识：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;
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详解Vue.js3.0 组件是如何渲染为DOM的
- js解决VUE项目使用Element-ui 下拉组件的验证失效问题js大全
- js在vue项目中promise解决回调地狱和并发请求的问题js大全
- jsEcharts在Taro微信小程序开发中的踩坑记录js大全
- jsvue 中的动态传参和query传参操作js大全
- js解决Vue大括号字符换行踩的坑js大全
- js在vue中使用eslint,配合vscode的操作js大全
- js解决vue初始化项目一直停在downloading template的问题js大全
- JavaScript如何将Node.js中的回调转换为Promise
- js解决vue init webpack 下载依赖卡住不动的问题js大全
刚刚发布热门点击发布时间
- [02/23]chrome 浏览器插件外包:定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]专业电脑浏览器插件外包服务，助力企业数字化转型！
- [02/23]解放双手，效率翻倍！Chrome插件前端自动化外包服务，助您轻松实现业务流程自动化！
- [02/23]定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]Chrome插件外包：为你的浏览器赋能，开启无限可能
- [09/06]node js 调用kimi 接口批量生成网页
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
