feat(api): 为图片流接口添加忽略全局loading的配置
为getImgStreamAPI添加ignore_loading选项,避免加载图片流时显示全局loading 修改axios拦截器逻辑以支持配置忽略loading 移除未使用的showSuccessToast导入并优化fetch方法注释
Showing
3 changed files
with
65 additions
and
24 deletions
| 1 | /* | 1 | /* |
| 2 | * @Date: 2022-05-18 22:56:08 | 2 | * @Date: 2022-05-18 22:56:08 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2023-08-24 10:56:44 | 4 | + * @LastEditTime: 2025-11-04 21:18:39 |
| 5 | - * @FilePath: /front/src/api/fn.js | 5 | + * @FilePath: /stdj_h5/src/api/fn.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| 8 | import axios from '@/utils/axios'; | 8 | import axios from '@/utils/axios'; |
| 9 | -import { showSuccessToast, showFailToast } from 'vant'; | 9 | +import { showFailToast } from 'vant'; |
| 10 | import qs from 'Qs' | 10 | import qs from 'Qs' |
| 11 | 11 | ||
| 12 | /** | 12 | /** |
| ... | @@ -65,16 +65,44 @@ export const uploadFn = (api) => { | ... | @@ -65,16 +65,44 @@ export const uploadFn = (api) => { |
| 65 | * 统一 GET/POST 不同传参形式 | 65 | * 统一 GET/POST 不同传参形式 |
| 66 | */ | 66 | */ |
| 67 | export const fetch = { | 67 | export const fetch = { |
| 68 | - get: function (api, params) { | 68 | + /** |
| 69 | - return axios.get(api, { params }) | 69 | + * GET 请求封装 |
| 70 | - }, | 70 | + * @param {string} api 接口地址 |
| 71 | - post: function (api, params) { | 71 | + * @param {object} params 查询参数 |
| 72 | - return axios.post(api, params) | 72 | + * @param {object} config 额外axios配置(可选),如 { ignore_loading: true } |
| 73 | - }, | 73 | + * @returns {Promise} axios响应 |
| 74 | - stringifyPost: function (api, params) { | 74 | + */ |
| 75 | - return axios.post(api, qs.stringify(params)) | 75 | + get: function (api, params, config) { |
| 76 | - }, | 76 | + return axios.get(api, { params, ...(config || {}) }) |
| 77 | - basePost: function (url, data, config) { | 77 | + }, |
| 78 | - return axios.post(url, data, config) | 78 | + /** |
| 79 | - } | 79 | + * POST 请求封装 |
| 80 | + * @param {string} api 接口地址 | ||
| 81 | + * @param {object} params 请求体数据 | ||
| 82 | + * @param {object} config 额外axios配置(可选) | ||
| 83 | + * @returns {Promise} axios响应 | ||
| 84 | + */ | ||
| 85 | + post: function (api, params, config) { | ||
| 86 | + return axios.post(api, params, config) | ||
| 87 | + }, | ||
| 88 | + /** | ||
| 89 | + * POST(表单序列化) | ||
| 90 | + * @param {string} api 接口地址 | ||
| 91 | + * @param {object} params 请求体数据(将被序列化) | ||
| 92 | + * @param {object} config 额外axios配置(可选) | ||
| 93 | + * @returns {Promise} axios响应 | ||
| 94 | + */ | ||
| 95 | + stringifyPost: function (api, params, config) { | ||
| 96 | + return axios.post(api, qs.stringify(params), config) | ||
| 97 | + }, | ||
| 98 | + /** | ||
| 99 | + * 基础POST | ||
| 100 | + * @param {string} url 完整地址 | ||
| 101 | + * @param {object} data 请求体数据 | ||
| 102 | + * @param {object} config axios配置 | ||
| 103 | + * @returns {Promise} axios响应 | ||
| 104 | + */ | ||
| 105 | + basePost: function (url, data, config) { | ||
| 106 | + return axios.post(url, data, config) | ||
| 107 | + } | ||
| 80 | } | 108 | } | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Date: 2023-08-24 09:42:27 | 2 | * @Date: 2023-08-24 09:42:27 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-11-03 15:21:35 | 4 | + * @LastEditTime: 2025-11-04 21:18:22 |
| 5 | * @FilePath: /stdj_h5/src/api/index.js | 5 | * @FilePath: /stdj_h5/src/api/index.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| ... | @@ -63,7 +63,11 @@ export const getSSQZAPI = (params) => fn(fetch.get(Api.GET_ARTICLE, params)); | ... | @@ -63,7 +63,11 @@ export const getSSQZAPI = (params) => fn(fetch.get(Api.GET_ARTICLE, params)); |
| 63 | * @property [object] data.list 封面图列表 | 63 | * @property [object] data.list 封面图列表 |
| 64 | * @property string data.list.value 封面图地址 | 64 | * @property string data.list.value 封面图地址 |
| 65 | */ | 65 | */ |
| 66 | -export const getImgStreamAPI = (params) => fn(fetch.get(Api.GET_ARTICLE_FILE, params)); | 66 | +/** |
| 67 | + * 忽略全局Loading的图片流媒体接口 | ||
| 68 | + * @description 调用该接口时不显示全局loading蒙版 | ||
| 69 | + */ | ||
| 70 | +export const getImgStreamAPI = (params) => fn(fetch.get(Api.GET_ARTICLE_FILE, params, { ignore_loading: true })); | ||
| 67 | 71 | ||
| 68 | /** | 72 | /** |
| 69 | * @description: 文章详情数据 | 73 | * @description: 文章详情数据 | ... | ... |
| ... | @@ -33,8 +33,9 @@ function safe_loading(method) { | ... | @@ -33,8 +33,9 @@ function safe_loading(method) { |
| 33 | loading.reset() | 33 | loading.reset() |
| 34 | } | 34 | } |
| 35 | } catch (e) { | 35 | } catch (e) { |
| 36 | - // 兜底:Pinia未就绪或Store未初始化时跳过,并输出调试信息 | 36 | + // 兜底:Pinia未就绪或Store未初始化时跳过 |
| 37 | - console.debug('全局loading未初始化,已跳过:', e) | 37 | + // 使用空操作避免空块,同时不打印控制台信息 |
| 38 | + void e | ||
| 38 | } | 39 | } |
| 39 | } | 40 | } |
| 40 | 41 | ||
| ... | @@ -43,8 +44,10 @@ function safe_loading(method) { | ... | @@ -43,8 +44,10 @@ function safe_loading(method) { |
| 43 | */ | 44 | */ |
| 44 | axios.interceptors.request.use( | 45 | axios.interceptors.request.use( |
| 45 | config => { | 46 | config => { |
| 46 | - // 开始全局loading计数(安全封装) | 47 | + // 开始全局loading计数(安全封装),可通过config.ignore_loading禁用 |
| 47 | - safe_loading('start') | 48 | + if (!config || config.ignore_loading !== true) { |
| 49 | + safe_loading('start') | ||
| 50 | + } | ||
| 48 | // const url_params = parseQueryString(location.href); | 51 | // const url_params = parseQueryString(location.href); |
| 49 | // GET请求默认打上时间戳,避免从缓存中拿数据。 | 52 | // GET请求默认打上时间戳,避免从缓存中拿数据。 |
| 50 | const timestamp = config.method === 'get' ? (new Date()).valueOf() : ''; | 53 | const timestamp = config.method === 'get' ? (new Date()).valueOf() : ''; |
| ... | @@ -60,7 +63,9 @@ axios.interceptors.request.use( | ... | @@ -60,7 +63,9 @@ axios.interceptors.request.use( |
| 60 | error => { | 63 | error => { |
| 61 | // 请求错误处理 | 64 | // 请求错误处理 |
| 62 | // 出现错误时重置loading,避免长时间遮挡(安全封装) | 65 | // 出现错误时重置loading,避免长时间遮挡(安全封装) |
| 63 | - safe_loading('reset') | 66 | + if (!error || !error.config || error.config.ignore_loading !== true) { |
| 67 | + safe_loading('reset') | ||
| 68 | + } | ||
| 64 | return Promise.reject(error); | 69 | return Promise.reject(error); |
| 65 | }); | 70 | }); |
| 66 | 71 | ||
| ... | @@ -71,13 +76,17 @@ axios.interceptors.response.use( | ... | @@ -71,13 +76,17 @@ axios.interceptors.response.use( |
| 71 | response => { | 76 | response => { |
| 72 | // 响应完成后减少计数 | 77 | // 响应完成后减少计数 |
| 73 | // 正常响应结束时减少pending计数,归零后关闭蒙版(安全封装) | 78 | // 正常响应结束时减少pending计数,归零后关闭蒙版(安全封装) |
| 74 | - safe_loading('end') | 79 | + if (!response || !response.config || response.config.ignore_loading !== true) { |
| 80 | + safe_loading('end') | ||
| 81 | + } | ||
| 75 | return response; | 82 | return response; |
| 76 | }, | 83 | }, |
| 77 | error => { | 84 | error => { |
| 78 | // 响应异常时直接重置隐藏loading | 85 | // 响应异常时直接重置隐藏loading |
| 79 | // 任一接口失败则关闭全局loading,交由页面/业务自行反馈错误(安全封装) | 86 | // 任一接口失败则关闭全局loading,交由页面/业务自行反馈错误(安全封装) |
| 80 | - safe_loading('reset') | 87 | + if (!error || !error.config || error.config.ignore_loading !== true) { |
| 88 | + safe_loading('reset') | ||
| 89 | + } | ||
| 81 | return Promise.reject(error); | 90 | return Promise.reject(error); |
| 82 | }); | 91 | }); |
| 83 | 92 | ... | ... |
-
Please register or login to post a comment