Vue项目使用axios配置请求拦截和响应拦截以及判断请求超时处理提示

哈喽大家好啊,最近做Vue项目看到axios

axios官网:起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)​​​​​​

重要点:

axios是基于Promise封装的

axios能拦截请求和响应

axios能自动转换成json数据

等等

安装:

$ npm install axios

Vue项目中使用axios实现请求拦截

javascript 复制代码
import axios from 'axios';// 引入axios

const httpAxios = axios.create({});// 创建实例

let config = {
	TIMEOUT: 600000,//设置超时时间为10min
};

// axios 配置超时时间
httpAxios.defaults.timeout = config.TIMEOUT;
  
  // axios设置  请求拦截
  httpAxios.interceptors.request.use(
    // config配置选项
    config => {
      console.log(config,'1')
      return config;
    },
    // error
    error => {
      return Promise.reject(error);
    }
  )

Vue项目中使用axios实现响应拦截

javascript 复制代码
 // axios响应拦截
  httpAxios.interceptors.response.use(
    // response响应成功
    response => {
      const config = response.config;
      console.log(config,'2')
      return response;
    },
    // 响应error
    error => {
      const config = error.config;
      console.log(config,'3')
      if(error.message.includes('timeout')) {
        return Promise.reject('timeout');// reject这个错误信息
        // 判断请求异常信息中是否含有超时timeout字符串
      }
      return Promise.reject('网络链接失败,请稍后再试!')
    }
  )

封装axios请求

javascript 复制代码
export const getHttpInfo = function (data) {
  return new Promise((resolve, reject) => {
    let token = ''
    if (data.headers) {
      token = data.headers.Authorization
    }
    httpAxios(data).then((res) => {
      resolve(res)
    }).catch((e) => {})
  })
}

设置超时时间并在响应拦截中判断超时并提示

javascript 复制代码
 gethttpInfo({
          method: 'post',
          url: url,
          data: this.order,
          headers: {
            'Authorization': localStorage.getItem('token')
          }
        }).then((res) => {
            }).catch((error) => {
              this.$message({
                type: 'warning',
                message: error!=='timeout' ? error : '其他错误'
          })
        });

参考原文:

Vue项目请求超时处理_vue接口请求超时处理_一捆铁树枝的博客-CSDN博客

相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript