Luckysheet源码分析之2-core.js分析

返回目录

1.生成配置项

表格的create从 core.js开始,默认的配置文件是 config.js , 用户也可以在创建前,通过自定义的配置项来复写相关配置参数;

let extendsetting = common_extend(defaultSetting, setting); // core.js Line38

2.参数初始化

接下来是 Store/server/luckysheetConfigsetting参数初始化

core.js - Line 40-89

3.初始化插件

目前看好像只有一个chart的插件类型(在 expendPlugins/chart),未来不排除其他类型插件的扩展

initPlugins(extendsetting.plugins , extendsetting.data); //core.js Line 92

4.加载function

从 function/functionlist.js里面把表格支持到的各色function加载进来,中英文两套array(locale这个方式是否可以改进?)

functionlist(); //core.js Line 95

5.设置屏幕分辨率

core.js - Line97-101

6.(疑似)加载数据的loading界面

$("#" + container).append(luckysheetlodingHTML()); //core.js Line 104

7.从file获取data(json格式),生成dom元素并注册一堆东西

sheetmanage.initialjfFile(menu, title); //core.js Line 108

7.1. 获取当前显示的sheet 放到 Store.currentSheetIndex

_this.getCurSheet(); // sheetmanage.js Line 585

7.2. 把当前的sheet对应的数据从json拉取到 file里面

(这里的json数据是在 index.html data:[] 里面定义的 )

let file = Store.luckysheetfile[_this.getSheetIndex(Store.currentSheetIndex)]; // sheetmanage.js Line 586

7.3. 从file提取 data

let data = _this.buildGridData(file); // sheetmanage.js Line 588

7.4. 从file获取 Store.luckysheet_select_save

(什么用途,还没研究出来,感觉像是记录上次关闭窗口点击的位置)

sheetmanage.js Line 590-598

7.5. 表格的高和宽分别写入 rowheight/colwidth

sheetmanage.js Line 619-627

7.6. 创建表格的dom元素,HTML脚本主要从 /controllers/constant 拼接整理而来,批注部分从 postil.js 而来

luckysheetcreatedom(colwidth, rowheight, data, menu, title); // sheetmanage.js Line 629

7.7. 设置界面上几个dom的 HoverTip

sheetmanage.js Line 632-633

7.8. 内部函数function ini()

sheetmanage.js Line 632-633
值得一提的是,通过localforage这个javascript的storage增强组件执行init(),通过server.clearcachelocaldata() remove掉缓存数据,然后执行初始化动作。init()里面进一步嵌套一个execF() ,cache加载,页面初始化等逻辑都是在这个函数里面实现。

8.几个大模块的显示隐藏hover效果等

luckysheetsizeauto(); //core.js Line 108

9.初始化工作区

initialWorkBook(); //core.js Line 120

9.1. 定义grid区域的各类人机交互

mousewheel/scroll/mousedown/mouseup/click
luckysheetHandler();//Overall dom initialization - handler.js - Line 62 - 4113

9.2. 定义筛选相关的一大堆click事务处理逻辑

initialFilterHandler();//Filter initialization - filter.js - Line 282 - 1769

9.3. 右键menu对应MatrixOperation 的若干矩阵处理事务

initialMatrixOperation();//Right click matrix initialization - matrixOperation.js - Line 11-1241

9.4. 页面最下面的 sheetbar各类事务处理

initialSheetBar();//bottom sheet bar initialization - sheetBar.js - Line 147 - 463

9.5. 公示栏以及 fx按钮 弹出框的各类事务

formulaBarInitial();//top formula bar initialization - formulaBar.js - Line 20 - 293

9.6. 行列的操作 新增、删除、隐藏、宽高等

rowColumnOperationInitial();//row and coloumn operate initialization - rowColumnOperation.js - Line 36 - 1483

9.7. 键盘相关的事件响应初始化注册,包括ctrl和shift的组合

keyboardInitial();//Keyboard operate initialization - keyboard.js - Line 242 - 917

9.8. menu上面的排序按钮,以及customer排序对话框相关事件

orderByInitial();//menu bar orderby function initialization - orderBy.js - Line 25 - 273

Uncaught (in promise) TypeError: error.response is undefined <anonymous> request.js:30 promise callback*_request Axios.js:163 request Axios.js:40 method Axios.js:213 wrap bind.js:5 setup Home.vue:181 callWithErrorHandling runtime-core.esm-bundler.js:199 setupStatefulComponent runtime-core.esm-bundler.js:7907 setupComponent runtime-core.esm-bundler.js:7868 mountComponent runtime-core.esm-bundler.js:5216 processComponent runtime-core.esm-bundler.js:5182 patch runtime-core.esm-bundler.js:4700 componentUpdateFn runtime-core.esm-bundler.js:5326 run reactivity.esm-bundler.js:225 setupRenderEffect runtime-core.esm-bundler.js:5454 mountComponent runtime-core.esm-bundler.js:5229 processComponent runtime-core.esm-bundler.js:5182 patch runtime-core.esm-bundler.js:4700 mountChildren runtime-core.esm-bundler.js:4932 mountElement runtime-core.esm-bundler.js:4855 processElement runtime-core.esm-bundler.js:4820 patch runtime-core.esm-bundler.js:4688 mountChildren runtime-core.esm-bundler.js:4932 mountElement runtime-core.esm-bundler.js:4855 processElement runtime-core.esm-bundler.js:4820 patch runtime-core.esm-bundler.js:4688 mountChildren runtime-core.esm-bundler.js:4932 mountElement runtime-core.esm-bundler.js:4855 processElement runtime-core.esm-bundler.js:4820 patch runtime-core.esm-bundler.js:4688 componentUpdateFn runtime-core.esm-bundler.js:5326 run reactivity.esm-bundler.js:225 setupRenderEffect runtime-core.esm-bundler.js:5454 mountComponent runtime-core.esm-bundler.js:5229 processComponent runtime-core.esm-bundler.js:5182 patch runtime-core.esm-bundler.js:4700 componentUpdateFn runtime-core.esm-bundler.js:5406 run reactivity.esm-bundler.js:225 runIfDirty reactivity.esm-bundler.js:263 callWithErrorHandling runtime-core.esm-bundler.js:199 flushJobs runtime-core.esm-bundler.js:408 promise callback*queueFlush r
03-16
<think>嗯,用户遇到了Vue中使用Axios时出现TypeError: error.response is undefined的问题。首先,我需要回想一下Axios的错误处理机制。Axios在请求失败时,返回的错误对象应该包含response属性,但有时可能没有,比如网络故障或请求被取消的情况。 这时候用户可能在错误处理中直接访问了error.response,导致undefined的错误。比如在catch块里写了console.log(error.response.status),如果error没有response属性,就会报错。 我记得解决这个问题的方法是先检查error对象是否有response属性。可以使用条件判断,比如if (error.response) { ... } else { ... }来处理不同的错误类型。另外,还要考虑其他可能的错误情况,比如网络错误或超时,这些情况下response可能不存在。 然后,用户提供的参考引用中,引用[1]提到了Axios和AJAX的使用方法,其中Axios的示例代码里用了.catch来处理错误,但没有检查error.response是否存在。这可能就是用户代码的问题所在。需要提醒用户在错误处理时先进行判断。 另外,还要检查请求配置是否正确,比如URL是否正确,是否有跨域问题。不过跨域问题通常会返回响应,只是状态码可能是403或404,这时候error.response应该是存在的。如果请求根本没有到达服务器,比如网络错误,那么response就是undefined。 总结下来,解决步骤应该是:1. 在错误处理中先判断error.response是否存在;2. 分情况处理不同的错误类型;3. 检查请求配置和网络状态。然后,生成相关问题,帮助用户进一步排查其他可能性,比如跨域问题或超时设置。</think>### Vue中Axios请求出现`TypeError: error.response is undefined`的解决方案 #### 问题原因 该错误通常发生在Axios请求失败时,尝试访问`error.response`属性,但此时错误对象中并未包含`response`字段。常见原因包括: 1. **网络错误**:请求未到达服务器(如断网、跨域拦截)[^1]。 2. **请求被取消**:通过`CancelToken`手动取消了请求。 3. **超时未响应**:服务器未在设定时间内返回响应。 4. **配置错误**:URL格式错误或协议不匹配(如HTTP/HTTPS混用)。 --- #### 逐步解决方案 ##### 1. **添加错误类型判断** 在`catch`代码块中,优先检查`error.response`是否存在: ```javascript axios.get('/api/data') .then(response => { /* ... */ }) .catch(error => { if (error.response) { // 服务器返回4xx/5xx状态码 console.log('状态码:', error.response.status); console.log('响应数据:', error.response.data); } else if (error.request) { // 请求已发送但无响应 console.log('无服务器响应,可能为网络问题'); } else { // 请求配置错误 console.log('请求配置错误:', error.message); } }); ``` ##### 2. **配置超时时间** 在Axios实例中设置超时阈值(单位:毫秒): ```javascript const instance = axios.create({ timeout: 5000, // 5秒未响应则触发超时错误 baseURL: 'https://api.example.com' }); ``` ##### 3. **检查跨域配置** 若使用本地开发环境,确保后端已启用CORS支持: ```javascript // Express示例 app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', 'http://localhost:8080'); res.header('Access-Control-Allow-Headers', 'Authorization, Content-Type'); next(); }); ``` ##### 4. **使用拦截器统一处理** 通过Axios拦截器全局管理错误: ```javascript axios.interceptors.response.use( response => response, error => { if (!error.response) { error.message = '网络连接异常,请检查配置或重试'; } return Promise.reject(error); } ); ``` --- #### 关键代码验证点 | 检查项 | 正常情况 | 异常表现 | |-----------------|--------------------------|------------------------------| | 网络控制台 | 显示完整请求/响应记录 | 请求标红或显示`(failed)` | | `error.config` | 包含完整的请求配置信息 | 缺失关键参数如URL、method | | 控制台警告 | 无CORS错误 | 出现`Blocked by CORS policy` | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值