精华内容
下载资源
问答
  • * 封装vue请求中(请求超时)+(网络不好)+(接口报错) * 全局弹框提醒 */ import Vue from 'vue'; import axios from 'axios'; //引入axios import { Toast } from 'vant'; import { Dialog } from 'vant'; ...
    fetch.js
    /*
     * @Descripttion: 
     * 封装vue请求中(请求超时)+(网络不好)+(接口报错)
     * 全局弹框提醒
     */
    import Vue from 'vue';
    import axios from 'axios'; //引入axios
    import { Toast } from 'vant';
    import { Dialog } from 'vant';
    axios.defaults.withCredentials = true
    // 封装ajax
    export function fetch(options) {
      // 添加加载中...
      const toast2 = Toast.loading({
        message: '获取数据中...',
        forbidClick: true,
        duration:0
      });
      // 获取url里的token值
      let TOKEN = 'aabbcc'//token换成从缓存获取
      //  method 请求方式未传入请求方式,默认POST
      options.method == 'GET' ? options.method = 'GET' : options.method = 'POST'
      return new Promise((resolve, reject) => {
        const instance = axios.create({ //instance创建一个axios实例,可以自定义配置,可在axios文档中查看详情
          baseURL: process.env.BASE_API, // api 的 base_url(config env.js中配置路径)
          //所有的请求都会带上这些配置,比如全局都要用的身份信息等。
          headers: {
            'Content-Type': options.contentType == "multipart/form-data" ? "multipart/form-data" : "application/json", //媒体格式类型
            'Authorization': TOKEN,  //Token从全局变量那里传过来
          },
          timeout: 30 * 1000, //30秒超时
          
        });
        instance.defaults.timeout = 30000;
        // 网络状态
        instance.interceptors.response.use(
          response => {
            toast2.clear()//在网络不好时清除加载中(否则会一直转点击不了确认我知道了)
            return response;
          },
          error => {
            if(error.message.includes('timeout')){   // 判断请求异常信息中是否含有超时timeout字符串
              // Toast('请求超时,请稍后再试')
              Dialog.alert({
                message: '请求超时,请稍后再试',
                confirmButtonText:'我知道了'
              }).then(() => {
                // on close
                toast2.clear()//在请求超时清除加载中(否则会一直转点击不了确认我知道了)
              });
              return Promise.reject(error);          // reject这个错误信息
            }
            // Toast('网络连接失败,请稍后再试')
            Dialog.alert({
              message: '网络连接失败,请稍后再试',
              confirmButtonText:'我知道了'
            }).then(() => {
              // on close
              toast2.clear()//在网络连接失败时清除加载中(否则会一直转点击不了确认我知道了)
            });
            return Promise.reject(error);
        });
    
        instance(options)
          // then 请求成功之后进行操作
          .then(response => {
            resolve(response); // 把请求到的数据发到引用请求的地方
          })
          // catch 请求异常之后进行操作
          .catch(error => {
            toast2.clear()//在接口报错时清除加载中(否则会一直转点击不了确认我知道了)
            var err;
            err = error.response
            if (err.status == 401) {
              Toast({
                message: 'Token失效请重新登录!',
                duration: 2000
              });
            } else {
              Toast({
                message: err.data.msg,
                duration: 2000
              });
            }
            reject(err);
          });
      });
    }
    
    
    
    
    展开全文
  • 主要介绍了vue axios请求超时,设置重新请求的完美解决方法,一并给大家介绍了axios基本用法,需要的朋友可以参考下
  • Vue项目请求超时处理

    千次阅读 2019-10-28 14:48:25
    现在网页项目大多采用前后端分离模式,这种模式优点有很多,但是也会带来不少问题,比如:请求后端接口时会受网络因素影响,导致请求超时;这就需要我们在请求方法中设置拦截,对请求超时做处理; 下面就是我在项目...

    现在网页项目大多采用前后端分离模式,这种模式优点有很多,但是也会带来不少问题,比如:请求后端接口时会受网络因素影响,导致请求超时;这就需要我们在请求方法中设置拦截,对请求超时做处理;

    下面就是我在项目中使用的axios封装方法,设置网络请超时拦截处理

    import axios from "axios";
    import { get } from "http";
    import { Toast } from 'vant';
    
    
    // api 路径
    // const server = "https://operator-app.funenc.com";
    const httpAxios = axios.create();//创建实例
    let Config = {
    	TIMEOUT: 6000,//设置超时时间为6秒
    	baseURL: {
    		dev: window.BASEURL_01,
    		prod: ''
    	}
    };
    // axios 配置
    httpAxios.defaults.timeout = Config.TIMEOUT;
    httpAxios.interceptors.response.use(
      response => {
        return response;
      },
      error => {
        if(error.message.includes('timeout')){   // 判断请求异常信息中是否含有超时timeout字符串
          Toast('请求超时,请稍后再试')
          return Promise.reject(error);          // reject这个错误信息
        }
        Toast('网络连接失败,请稍后再试')
        return Promise.reject(error);
      });
    export function fetch(url, method = "GET", params, query) {
      if (sessionStorage.app_token && sessionStorage.device_id) {
        httpAxios.defaults.headers["app-token"] = sessionStorage.app_token;
      }
      return new Promise((resolve, reject) => {
        httpAxios({
            method: method,
            url: global["G_SERVER_URL"] + url,
            data: params,
            params: query
          })
          .then(response => {
            resolve(response.data);
          })
          .catch(error => {
            reject(error);
          });
      });
    }

     

    展开全文
  • vue 设置请求超时时间处理

    万次阅读 2019-06-06 09:00:00
    Vue.http.post('http://114.214.164.77:2222/crptorgraphy',{msg:JSON.stringify(req)},{emulateJSON:true,_timeout:3000, onTimeout: (request) => { //超出时间你要处理的逻辑 ...
    Vue.http.post('http://114.214.164.77:2222/crptorgraphy',{msg:JSON.stringify(req)},{emulateJSON:true,_timeout:3000,
               onTimeout: (request) => {
                   //超出时间你要处理的逻辑
                    
               }}).then((response) => {
        }, (error) => {
            
        });
    //拦截器设置全局请求token
    Vue.http.interceptors.push((request, next) => {
            //设置请求时间
            let timeout;
            // 如果某个请求设置了_timeout,那么超过该时间,会终端该(abort)请求,并执行请求设置的钩子函数onTimeout方法,不会执行then方法。
            if (request._timeout) {
                timeout = setTimeout(() => {
                    if(request.onTimeout) {
                        request.onTimeout(request);
                        request.abort()
                    }  
                }, request._timeout);
            }
            next((response) => {
                clearTimeout(timeout);
                return response
            })
    })

     

    转载于:https://www.cnblogs.com/lizhao123/p/10983081.html

    展开全文
  • vue-resource请求超时timeout设置

    千次阅读 2020-01-11 14:35:39
    vue-resource请求超时timeout设置 请求超时设置通过拦截器Vue.http.interceptors实现具体代码如下 main.js里在全局拦截器中添加请求超时的方法 方法1:超时之后会调用请求中的onTimeoutd方法,then方法不会执行 ...

    vue-resource请求超时timeout设置

    请求超时设置通过拦截器Vue.http.interceptors实现具体代码如下

    main.js里在全局拦截器中添加请求超时的方法

    方法1:超时之后会调用请求中的onTimeoutd方法,then方法不会执行

    Vue.http.interceptors.push((request, next) => {
        let timeout;
        // 如果某个请求设置了_timeout,那么超过该时间,会终端该(abort)请求,并执行请求设置的钩子函数onTimeout方法,不会执行then方法。
        if (request._timeout) {
            timeout = setTimeout(() => {
                if(request.onTimeout) {
                    request.onTimeout(request);
                    request.abort()
                }  
            }, request._timeout);
        }
        next((response) => {
           clearTimeout(timeout);
        return response;
        })
    })
    

    页面中用到vue-resource请求的地方如下设置即可。

    this.$http.get('url',{
                params:{.......},
           ......
               _timeout:3000,
               onTimeout: (request) => {
                   alert("请求超时");
               }
         }).then((response)=>{
                   
    });
    

     方法2:超时之后可以在then的第二个error方法中获取,私以为这个方法更好一些

    main.js中设置如下

    Vue.http.interceptors.push((request, next) => {
        let timeout;
        // 這裡改用 _timeout
        if (request._timeout) {
            timeout = setTimeout(() => {
            //自定义响应体 status:408,statustext:"请求超时",并返回给下下边的next
                next(request.respondWith(request.body, {
                     status: 408,
                     statusText: '请求超时'
                }));
                
            }, request._timeout);
        }
        next((response) => {
        console.log(response.status)//如果超时输出408
        return response;
        })
    })
    页面请求设置
    
    this.$http.get(`repairs/${this.repairs_id}`,{
                    params:{with:'room;user'},
                    _timeout:100,//设置超时时间
                }).then((response)=>{
                },(err)=>{
                    console.log(err.status);//如果超时,此处输出408
    });
    
    /** 
     *             ,%%%%%%%%, 
     *           ,%%/\%%%%/\%% 
     *          ,%%%\c "" J/%%% 
     * %.       %%%%/ o  o \%%% 
     * `%%.     %%%%    _  |%%% 
     *  `%%     `%%%%(__Y__)%%' 
     *  //       ;%%%%`\-/%%%'
     * ((       /  `%%%%%%%' 
     *  \\    .'          | 
     *   \\  /       \  | | 
     *    \\/         ) | | 
     *     \         /_ | |__ 
     *     (___________))))))) 攻城湿 
     * 
     *        _       _ 
     * __   _(_)_   _(_) __ _ _ __ 
     * \ \ / / \ \ / / |/ _` |'_ \ 
     *  \ V /| |\ V /| | (_| | | | | 
     *   \_/ |_| \_/ |_|\__,_|_| |_| 
     */ 

    参考文章  https://segmentfault.com/q/1010000005800495/a-1020000005802004

    展开全文
  • 请求超时: 1,可以在全局设置请求超时: axios.defaults.timeout = 30 * 1000; // 30s 2,在某一个请求里面设置超时: axios.post(url, params, {timeout: 1000}) .then(res => { console.log(res); }) ....
  • 解决在vue中axios请求超时的问题
  • 前言 连的是腾讯地图的地点云api 报错 Uncaught (in promise) {statusText: "Request Timeout", status: 408} 解决 加个参数 output: ‘jsonp’ ... key: process.env.VUE_APP_MAP_KEY, table_id: '605
  • //在main.js设置全局的请求次数,请求的间隙 axios.defaults.retry = 4; axios.defaults.retryDelay = 1000; axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) { var config...
  •     每一个你不满意的现在,都有一个你没有努力的曾经...但当请求超时时,res是没有数据的,这时再去判断res中的数据,肯定是undefined。 所以,可以采用如下处理:     // response ...
  • 请求超时VUE axios重新再次请求

    千次阅读 2018-03-01 13:08:00
    //在main.js设置全局的请求次数,请求的间隙 axios.defaults.retry = 4; axios.defaults.retryDelay = 1000; axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) { var config...
  • 超时之后可以在then的第二个error方法中获取, main.js中设置如下: 1 Vue.http.interceptors.push((request, next) => { 2 let timeout; 3 // 這裡改用 _timeout 4 if (request._timeout) { 5 ...
  • vue-resource请求超时实现http拦截及路由拦截 我们可以通过路由拦截做什么?我认为最主要的便是对权限的控制,比如有的页面需要登录了才能进入,有些页面不同身份渲染不同.接下来简单的讲一下登录拦截. vue路由拦截器...
  • vue中的axios请求超时处理

    千次阅读 2019-11-09 10:47:53
    在做数据源连接测试时,用axios请求时发现数据库连接超时,前台也没有响应。 在此就加了拦截器: import {serialize} from '@/util/util' import {getStore} from '../util/store' import NProgress from 'nprogress...
  • vue-resource 设置请求超时后,做出对应响应需求描述问题解决方式具体解决过程1. vue-resource 中 inteceptor 的基本介绍2. inteceptor 的基本用法3. 使用 inteceptor 解决本问题3.1 超时之后可以在then的第二个...
  • vue.js 终止请求和请求超时的方法

    千次阅读 2020-05-21 10:51:49
    当前端请求发送并且响应未完成时,终止请求,不再返回数据 1、Axios 提供了一个 CancelToken的函数,这是一个构造函数,该函数的作用就是用来取消接口请求的。利用axios请求的config参数,向axios添加一个包含...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 355
精华内容 142
关键字:

vue请求超时

vue 订阅