精华内容
下载资源
问答
  • axios请求超时

    2020-07-22 11:09:52
    axios请求超时,设置重新请求的完美解决方法 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。 具体原因...

    axios请求超时,设置重新请求的完美解决方法

    自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。

    具体原因
    最近公司在做一个项目, 服务端数据接口用的是Php输出的API, 有时候在调用的过程中会失败, 在谷歌浏览器里边显示Provisional headers are shown。

    按照搜索引擎给出来的解决方案,解决不了我的问题.

    最近在研究AOP这个开发编程的概念,axios开发说明里边提到的栏截器(axios.Interceptors)应该是这种机制,降低代码耦合度,提高程序的可重用性,同时提高了开发的效率。

    带坑的解决方案一
    我的经验有限,觉得唯一能做的,就是axios请求超时之后做一个重新请求。通过研究 axios的使用说明,给它设置一个timeout = 6000

    axios.defaults.timeout = 6000;
    复制代码
    然后加一个栏截器.

    // Add a request interceptor
    axios.interceptors.request.use(function (config) {
        // Do something before request is sent
        return config;
      }, function (error) {
        // Do something with request error
        return Promise.reject(error);
    });
    
    // Add a response interceptor
    axios.interceptors.response.use(function (response) {
        // Do something with response data
        return response;
      }, function (error) {
        // Do something with response error
        return Promise.reject(error);
    });
    

    这个栏截器作用是 如果在请求超时之后,栏截器可以捕抓到信息,然后再进行下一步操作,也就是我想要用 重新请求。

    这里是相关的页面数据请求。

    this.$axios.get(url, {params:{load:'noload'}}).then(function (response) {
    	//dosomething();
    }).catch(error => {
    	//超时之后在这里捕抓错误信息.
    	if (error.response) {
    		console.log('error.response')
    		console.log(error.response);
    	} else if (error.request) {
    		console.log(error.request)
    		console.log('error.request')
    		if(error.request.readyState == 4 && error.request.status == 0){
    			//我在这里重新请求
    		}
    	} else {
    		console.log('Error', error.message);
    	}
    	console.log(error.config);
    });
    

    超时之后, 报出 Uncaught (in promise) Error: timeout of xxx ms exceeded的错误。

    在 catch那里,它返回的是error.request错误,所以就在这里做 retry的功能, 经过测试是可以实现重新请求的功功能, 虽然能够实现 超时重新请求的功能,但很麻烦,需要每一个请API的页面里边要设置重新请求。

    看上面,我这个项目有几十个.vue 文件,如果每个页面都要去设置超时重新请求的功能,那我要疯掉的.

    而且这个机制还有一个严重的bug,就是被请求的链接失效或其他原因造成无法正常访问的时候,这个机制失效了,它不会等待我设定的6秒,而且一直在刷,一秒种请求几十次,很容易就把服务器搞垮了,请看下图, 一眨眼的功能,它就请求了146次。

    带坑的解决方案二
    研究了axios的源代码,超时后, 会在拦截器那里 axios.interceptors.response 捕抓到错误信息, 且 error.code = “ECONNABORTED”,

    具体链接

    // Handle timeout
    request.ontimeout = function handleTimeout() {
      reject(createError('timeout of ' + config.timeout + 'ms exceeded', config, 'ECONNABORTED',
        request));
    
      // Clean up request
      request = null;
    };
    

    所以,我的全局超时重新获取的解决方案这样的。

    axios.interceptors.response.use(function(response){
    ....
    }, function(error){
    	var originalRequest = error.config;
    	if(error.code == 'ECONNABORTED' && error.message.indexOf('timeout')!=-1 && !originalRequest._retry){
    			originalRequest._retry = true
    			return axios.request(originalRequest);
    	}
    });
    

    这个方法,也可以实现得新请求,但有两个问题,1是它只重新请求1次,如果再超时的话,它就停止了,不会再请求。第2个问题是,我在每个有数据请求的页面那里,做了许多操作,比如 this.$axios.get(url).then之后操作。

    完美的解决方法
    以AOP编程方式,我需要的是一个 超时重新请求的全局功能, 要在axios.Interceptors下功夫,在github的axios的issue找了别人的一些解决方法,终于找到了一个完美解决方案,就是下面这个。

    https://github.com/axios/axios/issues/164#issuecomment-327837467
    
    //在main.js设置全局的请求次数,请求的间隙
    axios.defaults.retry = 4;
    axios.defaults.retryDelay = 1000;
    
    axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
        var config = err.config;
        // If config does not exist or the retry option is not set, reject
        if(!config || !config.retry) return Promise.reject(err);
        
        // Set the variable for keeping track of the retry count
        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);
        });
    });
    

    其他的那个几十个.vue页面的 this.$axios的get 和post 的方法根本就不需要去修改它们的代码。

    转载:https://juejin.im/post/5abe0f94518825558a06bcd9

    展开全文
  • axios 设置超时

    万次阅读 2018-06-11 14:40:50
    以post请求为例:axios.post(url, params, {timeout: 1000 * 60 * 2}).then(function(resp){ console.log(resp)}).catch(() => { console.log('111')})url:请求地址params:请求参数{timeout: 1000 * 60 *...

    以post请求为例:

    axios.post(url, params, {timeout: 1000 * 60 * 2}).then(function(resp){

        console.log(resp)

    }).catch(() => {

        console.log('111')

    })

    url:请求地址

    params:请求参数

    {timeout: 1000 * 60 * 2}:设置超时,超时时间为2分钟

    展开全文
  • axios超时处理

    千次阅读 2019-03-27 15:10:20
    但是axios之中,并没有超时回调给你,所以这就需要你根据error信息来进行判断 我们开始走流程把: 1、判断超时,网上很多都是一模一样的,完全没有自己的见解,这里我不推荐这种方式,所以,我希望你看了之后,自己...

    在工作中,我们基本会遇到请求超时,需要重新发起请求或者进行相应的处理

    但是axios之中,并没有超时回调给你,所以这就需要你根据error信息来进行判断
    我们开始走流程把:
    1、判断超时,网上很多都是一模一样的,完全没有自己的见解,这里我不推荐这种方式,所以,我希望你看了之后,自己去理解使用方法和思维,写出自己的东西。
    需要了解报错后的信息后再度 编写文章

    思路

    1、设置一种状态,若超时,状态设置为true,则一直重新请求
    2、设置次数,若超时次数大于设置次数,则不再重新发起请求
    方案2 已有成熟方案,百度即可

    	axios.defaults.sendSuscced = true  // 初始化报错后的请求状态
    	axios.defaults.retryDelay = 10000; // 设置超时时间
    	//很多人使用了axios的Interceptors来做处理,这里就来写一下
    	//建立响应拦截器
    	axios.interceptors.response.use(res => {
    		//这里是正常流程走的,我们这里讲解的是超时处理,我就不多说了
    	}, error => {
    		根据传回来的错误信息`erroe`进行判断
    		意为:`error.code`
    	 	if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
    			console.log('根据你设置的timeout/真的请求超时 判断请求现在超时了,
    			你可以在这里加入超时的处理方案')
    			`这里我 的方案是,超时后再次请求,所以新建了一个promise`
    			var newHttp= new Promise(function (resolve){
    				resolve()
    			})
    			`newHttp实例执行完成后会再次执行`
    			// 返回一个promise实例,同时重新发起请求,config请求配置,包扩请求头和请求参数
    			return newHttp.then(function (){
    				return axios(config)
    			})
    		}
    		// 若不是超时,则返回未错误信息
    		return Promise.reject(error)
    
    	})
    	
    
    展开全文
  • axios 设置超时时间 — timeout

    千次阅读 2019-08-14 11:03:09
    全局设置网络超时时间 axios.defaults.timeout = 30 * 1000;

    全局设置网络超时时间

    axios.defaults.timeout = 30 * 1000;  
    
    展开全文
  • axios 设置超时时间 timeout

    万次阅读 2019-05-31 13:19:29
    全局设置网络超时 axios.defaults.timeout = 30000; 单独对某个请求设置网络超时 let timeout = parseInt(paramsTimeout); this.$ajax.post(url, params, {timeout: timeout}) .then(res => { console....
  • 解决axios请求超时

    千次阅读 2020-01-14 10:42:03
    在使用过程中会有许多问题存在,比如由于网络不稳定导致请求超时/失败,通常有两种解决方案,一种是提示用户重新提交请求,另一种是进行相关提示并自动重新发送请求。第二种方式用户体验明显高于第一种方式。本文就...
  • axios请求超时后重新请求

    千次阅读 2018-08-16 10:55:12
    在vue或是react中进行网络请求axios用的都比较多,有时会因为网络不稳定问题导致请求超时,请求超时后常用解决方案都会重新尝试发送请求,尝试指定次数后不管成功与否皆结束本次请求 下面是具体解决方案,主要使用了...
  • 解决在vue中axios请求超时的问题
  • axios 请求超时处理方法

    千次阅读 2020-06-23 09:28:20
    //设置超时时间,单位毫秒 Axios.defaults.retry = 3; //设置全局请求次数 Axios.defaults.retryDelay = 1000;//设置全局请求间隙 // http 响应拦截器 Axios.interceptors.response.use((response) => { var ...
  • 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。 具体原因 最近公司在做一个项目, 服务端数据接口用的...
  • 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。 具体原因 最近公司在做一个项目,...
  • 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。 具体原因: 最近公司在做一个项目, 服务端数据接口...
  • (1)后端接口请求超时。 (2)后端接口报错。 (3)弱网状态下,重新请求。 2、实现步骤 axios中的使用 以下代码都是在api.js中进行操作: (1)先进行axios的配置: //设置全局的请求次数,请求的间隙 axios....
  • axios的请求超时处理

    千次阅读 2019-11-30 18:38:57
    axios超时可以通过拦截器返回到catch中,然后处理。 js文件,直接引入UI框架,就可以进行了弹出框等弹出,然后显示给用户。
  • AXIOS超时取消请求

    千次阅读 2019-07-19 18:32:49
    今天发现项目在网络不好的时候发出请求会一直使页面处于等待状态,十分不友好。所以我在发出请求的函数中增加了取消axios请求的方法。 设置如下 //axios外 const CancelToken = axios.CancelToken; let cancel; ...
  • axios设置请求超时时间 timeout

    万次阅读 2020-03-27 19:36:43
    1.axios全局设置网络超时 axios.defaults.timeout = 30 * 1000; // 30s 2.单独对某个请求设置网络超时 axios.post(url, params, {timeout: 1000}) .then(res => { console.log(res); }) .catch(err=>...
  • 前端经常要对服务器的错误信息做处理,小编是头一次做,就...import axios from "axios"; import {Toast} from "mint-ui" export const fetch = (type, url, params) => { if (type === 'POST') { return n...
  • axios网络模块封装

    2021-07-08 15:20:47
    1、认识axios网络模块认识 1、支持多种请求方式: axios(config) axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]...
  • axios里如何优雅的处理网络超时

    千次阅读 2019-09-20 11:21:15
    网络超时的常见表现就是我们请求一个接口如果长时间得不到服务器的响应。就会出现网络中断,报错提示网络超时。 在前端项目中,我们一般通过axios的拦截器对后端的请求和响应进行统一处理。 网络超时属于返回异常...
  • axios超时timeout拦截

    千次阅读 2019-10-02 01:52:01
    网络请求中,可能不可避免的会遇到网络差或者请求超时的情况,这时候,如果你采用的技术是axios,那就可以通过设置拦截器捕获这个异常情况,并做出下一步处理。 代码实践: ① 设置拦截器,返回timeout的错误...
  • 作为前端开发者,每个项目基本都需要和后台交互,目前比较流行的ajax库就是axios了,当然也有同学选择request插件,这个萝卜白菜,各有所爱了。目前虽然axios有config、interceptor和各个请求方式,但是针对一个大型...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,894
精华内容 1,157
关键字:

axios网络超时