Vue-axios 请求超时，请求拦截器

╰+哭是因爲堅強的太久メ 2022-12-31 02:26 665阅读 0赞

## 请求超时： ##

1，可以在全局设置请求超时：

axios.defaults.timeout = 30 * 1000; // 30s

2，在某一个请求里面设置超时：

axios.post(url, params, { timeout: 1000})
      .then(res => { 
        console.log(res);
      })
      .catch(err=> { 
        console.log(err);
      })
    })

3，webpack的dev的proxyTable的超时时间设置

dev: { 
        // Paths
        assetsSubDirectory: 'static', // 静态资源文件夹
        assetsPublicPath: '/', // 发布路径
        // 代理配置表，在这里可以配置特定的请求代理到对应的API接口
        // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
        proxyTable: { 
          '/api': { 
            timeout: 30000, // 请求超时时间
            target: 'http://127.0.0.1:3006', // 目标接口域名
            changeOrigin: true, // 是否跨域
            pathRewrite: { 
              '^/api': '' // 重写接口
            }
          },
        // Various Dev Server settings
        host: 'localhost', // can be overwritten by process.env.HOST
        port: 4200, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
      },

## 请求/ 响应 拦截： ##

// util.js
    import axios from 'axios'
    import cookies from 'vue-cookies'
    import router from 'vue-router'
    export const $axios = axios.create({  // 自定义一个实例，用于timeout 等一些方法
      timeout: 7000,
    })
    
    // 拦截请求
    $axios.interceptors.request.use(
      config => { 
        console.log(config);
        let t = cookies.get('t')
        if (t) { 
          config.headers.t = t
        } else { 
          router.replace({ path: '/login'})
        }
        return config
      },
      err => { 
        return Promise.reject(err)
      }
    )
    
    // 拦截响应
    $axios.interceptors.response.use(
      response => { 
        console.log(response)
        return response
      },
      err => { 
        console.log(err);
        if (err.response) { 
          switch (err.response.status) { 
            case 401:
              // 这里写清除token的代码
              router.replace({ 
                path: 'login',
                query: { redirect: router.currentRoute.fullPath} // 登录成功后跳入浏览的当前页面
              })
          }
        }
        return Promise.reject(err)
      }
    )