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

 

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

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

  重要点：

         axios是基于Promise封装的

         axios能拦截请求和响应

         axios能自动转换成json数据

        等等

安装：

$ npm install axios

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

import axios from 'axios';// 引入axiosconst 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;},// errorerror => {return Promise.reject(error);})

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

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

1. 封装axios请求

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) => {})})
}

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

 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博客