vue 请求超时(Vue项目请求超时处理)

现在网页项目大多采用前后端分离模式,这种模式优点有很多,但是也会带来不少问题,比如:请求后端接口时会受网络因素影响,导致请求超时;这就需要我们在请求方法中设置拦截,对请求超时做处理;,下面我们就来说一说关于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); }); }); }

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页