摘要本文记录一次移动端“redirect_uri域名不可信”问题的实战排查过程。当 PC 端调试工具不可用、后端错误信息又未做捕获处理时如何补充 Promise 错误捕获机制定位真实报错并通过 vConsole 在手机端完成调试。文章覆盖业务错误、网络错误与 then 内部实现。目录项目场景一、捕获返回的真实错误1.1 示例的初始准备1.2 捕获实际错误1.2.1 业务错误1.2.2 网络错误1.2.3 then 内部二、手机端调试安装 vConsole项目场景在移动端开发中PC 端调试工具无法使用且后端错误信息未捕获导致接口请求失败时只能看到自定义的笼统错误信息。本文以一次真实的“域名不可信”问题排查为切入点结合 Promise 错误捕获与 vConsole 调试分享一套可复用的移动端排错思路。一、捕获返回的真实错误1.1 示例的初始准备main.js 全局axios原型挂载import axios from axios Vue.prototype.axios axios对比Vue3 处理方式通过 app.config.globalProperties 通过 provide / inject 配合单独封装请求模块 直接import import {createApp} from vue import axios from axios import App from ./App.vue const app createApp(APP) app.config.globalProperties.$axios axios // app.provide(axios,axios) app.mount(#app)1.2 捕获实际错误1.2.1 业务错误Home.vuethis.axios(executor) —— Promsiep1.then(onFulfilled,onRejected) —— Promisep2.catch(onFulfilled,onRejected) —— Promisep3业务错误fulfilled状态result.data.code !200回调无错误。-无 throw / return reject- x undefined - resolvePromise - resolve(undefined)- p2 fulfilled业务错误无法捕获script access_token(){ …… this.axios({}).then(result { if(result.data.code 200){} else{ this.$notify({ message:失败}) } }).catch(err { this.$notify({ message:获取用户信息失败网络异常或服务不可用, type:danger }) }) …… } script业务错误rejected状态// 方式一可以处理业务成功 和 P1网络错误⚠️ unhandled rejectionP2 主动抛出 和 JS引擎自动抛出 的情况 .then( result { if(result.data.code 200){} else{ throw new Error(result.data.msg) // return Promise.reject(result.data) }}, err { console.log(失败err)} ) // 方式二捕获业务错误 .then(null,onRejected) 和 P1网络错误 .then( result { if(result.data.code 200){} else{ throw new Error(result.data.msg) // 回调 // return Promise.reject(result.data)} } ) .catch(err {...})1.2.2 网络错误错误穿透1. then 的 onRejected 参数为 null默认 e { throw e }2. p1 网络错误p1 rejected - p2 handleRejected() - catch(e){ reject(e) } - p2: rejected场景响应结构异常 / 网络异常code 200 数据为空/数据正常 / code ! 200script access_token(){ …… this.axios({}).then(result { if(!result || !result.data){ return Promsie.reject(new Error(响应数据格式异常)) } if(result.data.code 200){ const data result.data.data if(!data) return Promise.reject(new Error(返回数据为空)) } else{ const msg result.data.msg || const error new Error(msg || (code result.data.code)) error.isBusinessError true return Promise.reject(error) } }).catch(err { var message 获取用户信息失败 if(err err.isBusinessError) message 获取用户信息失败 err.message if(err err.message){ message 获取用户信息失败网络异常或服务不可用 } this.$notify({ message: message, type: danger, duration: 8000 }) }) …… } script1.2.3 then 内部// P1:fulfilled - P2:onFulfilled ; rejected - onRejected then(onFulfilled, onRejected){ onFulfilled typeof onFulfilled function ? onFulfilled : v v onRejected typeof onRejected function ? onRejected : e {throw e} // onRejected 默认 throw e const p2 new MyPromise((resolve, reject)gt;{ const handleFulfilled () gt; { queueMicrotask(()gt;{ try{ const x onFulfilled(this.reason) resolvePromise(p2,x,resolve,reject) }catch(e){ reject(e) } }) } if(this.state FULFILLED) handleFulfilled() else if(this.state REJECTED) handleRejected() else{ this.onFulfilledCbs.push(handleFulfilled) } }) }二、手机端调试安装 vConsolenpm install vconsole 21 | tail 15// main.js 导入模块 import VConsole from vconsole // 初始化 new VConsole()三、总结与注意事项本次移动端排查的核心思路可以概括为三步先补充Promise错误捕获机制把笼统的失败提示替换为真实报错再通过 vConsole 在手机端查看控制台日志以及网络请求定位具体异常最后建立细分的错误捕获机制避免静默忽略根据错误类型业务错误、网络错误、then 内部异常分别处理。下面整理关键步骤与常见问题便于复用。3.1 关键步骤补充 Promise 错误捕获在 axios 请求链中显式处理业务错误与网络错误避免错误被静默吞掉。区分错误类型业务错误通过result.data.code判断并向上抛出交给.catch统一接管网络错误与响应结构异常直接在catch中全局兜底。类比收快递去通俗理解一个是主动抛出——接收到快递但是快递本身存在问题一个是被动兜底——运输过程出现问题未收到快递接入 vConsole在 main.js 中引入并初始化 vConsole手机端即可查看 console 日志与网络请求。复现并验证在真机上复现问题结合 vConsole 输出的真实报错信息反向定位是域名、接口还是代码逻辑的问题。以上排查思路不仅适用于本次“域名不可信”问题也可以复用到其他移动端接口异常场景。核心是让错误信息可见、可追踪再结合 vConsole 快速定位原因。