vue 请求超时（Vue项目请求超时处理）

现在网页项目大多采用前后端分离模式，这种模式优点有很多，但是也会带来不少问题，比如：请求后端接口时会受网络因素影响，导致请求超时；这就需要我们在请求方法中设置拦截，对请求超时做处理；，下面我们就来说一说关于vue 请求超时?我们一起去了解并探讨一下这个问题吧!

vue 请求超时

现在网页项目大多采用前后端分离模式，这种模式优点有很多，但是也会带来不少问题，比如：请求后端接口时会受网络因素影响，导致请求超时；这就需要我们在请求方法中设置拦截，对请求超时做处理；

下面就是我在项目中使用的axios封装方法，设置网络请超时拦截处理

import axios from "axios"; import { get } from "http"; import { Toast } from 'vant'; // api 路径 // const server = "https://operator-app.funenc.com"; const httpAxios = axios.create();//创建实例 let Config = { TIMEOUT: 6000,//设置超时时间为6秒 baseURL: { dev: window.BASEURL_01, prod: '' } }; // axios 配置 httpAxios.defaults.timeout = Config.TIMEOUT; httpAxios.interceptors.response.use( response => { return response; }, error => { if(error.message.includes('timeout')){ // 判断请求异常信息中是否含有超时timeout字符串 Toast('请求超时，请稍后再试') return Promise.reject(error); // reject这个错误信息 } Toast('网络连接失败，请稍后再试') return Promise.reject(error); }); export function fetch(url, method = "GET", params, query) { if (sessionStorage.app_token && sessionStorage.device_id) { httpAxios.defaults.headers["app-token"] = sessionStorage.app_token; } return new Promise((resolve, reject) => { httpAxios({ method: method, url: global["G_SERVER_URL"] url, data: params, params: query }) .then(response => { resolve(response.data); }) .catch(error => { reject(error); }); }); }