深圳 德 网站建设正版搜索引擎优化
哈喽大家好啊，最近做Vue项目看到axios
axios官网：起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)
重要点：
axios是基于Promise封装的
axios能拦截请求和响应
axios能自动转换成json数据
等等
安装：
$ npm install axios
-
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);})-
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('网络链接失败，请稍后再试!')})-
封装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) => {})})
}-
设置超时时间并在响应拦截中判断超时并提示
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博客