zoukankan      html  css  js  c++  java
  • axios超时timeout拦截

    应用场景:

    在网络请求中,可能不可避免的会遇到网络差或者请求超时的情况,这时候,如果你采用的技术是axios,那就可以通过设置拦截器捕获这个异常情况,并做出下一步处理。

    代码实践:

    ① 设置拦截器,返回timeout的错误信息

    // main.js
    import Vue from 'vue'
    import App from './App'
    
    // 原型上挂载axios,便于全局使用 Vue.prototype.axios = axios // 设置axios的返回拦截(还可以设置request拦截,这里暂时用不上) axios.interceptors.response.use( response => { return response; }, error => { if(error.message.includes('timeout')){ // 判断请求异常信息中是否含有超时timeout字符串 console.log("错误回调", error);
    alert("网络超时"); return Promise.reject(error); // reject这个错误信息 } return Promise.reject(error); }); Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App } })

      

    ② 上面已经拦截并返回了错误信息,接下来就是捕获错误并进行回调处理

    methods: {
      submit() {
         let params = {id: 1};
         this.axios.post(global.urlPrefix + "/aviationOrder/batchModifyDeliveryCompany",params,{ timeout: 60000 })
         .then(res => {
            // success callback
         })
         .catch(error => {
            console.log(error);  // 这里就能拿到拦截器中返回的错误信息了,如果想重新发送请求,就this.submit重新调一次方法,或者是页面给出错误提示,反正根据实际项目需求来处理。
    // fail callback }); }, }

    注意:

    此方法的局限性在于所有网络超时都被reject了,如果不在axios调用中去catch的话,这个错误就被吞了,所以,建议,在reject的同时,不管三七二十二,都给出页面提示。

  • 相关阅读:
    推荐给新手gopher的一些书籍
    flask中路由处理
    flask中间件之请求扩展
    Chrome调试技巧
    iconfont 使用
    @font-face 使用过程
    SEO
    数据结构与算法2-4 队列
    数据结构与算法2-4 堆栈链式存储
    软件推荐--Sublime Text3常用快捷键查询(不断更新ing)
  • 原文地址:https://www.cnblogs.com/hcxy/p/10052465.html
Copyright © 2011-2022 走看看