网站建设公司代理商,怎么用免费的网站空间,网络营销课程去哪里学,邢台企业做网站费用在开发过程中#xff0c;我们的目标是 0error#xff0c;0warning。
但有很多因素并不是我们可控的#xff0c;为了避免某块代码的错误#xff0c;影响到其他模块或者整体代码的运行#xff0c;我们经常会使用try-catch模块来主动捕获一些异常或者错误。
比如我们在获取…在开发过程中我们的目标是 0error0warning。
但有很多因素并不是我们可控的为了避免某块代码的错误影响到其他模块或者整体代码的运行我们经常会使用try-catch模块来主动捕获一些异常或者错误。
比如我们在获取 url 中的参数后对其进行 JSON 解析这里就要用try-catch包裹一下因为我们不能保证获取到的参数一定是可以正常解析的
const user getQueryString(user);
if (user) {try {const { id, username} JSON.parse(user);console.log(id, username);} catch (err) {console.error(err);}
}用户在复制链接的过程中有可能会有意无意地复制不完全导致整个参数不完整JSON.parse无法解析不完整的 json string。为了避免因数据不完整造成的 JSON 解析错误我们可以将其用try-catch包括起来。
一、 try-catch 不能捕获哪些错误
我们经常会使用try-catch模块来主动捕获一些异常或者错误避免此块的代码影响到其他模块或者整体代码的运行。但有些情况try-catch 并不能捕获到代码中的异常
1.跨域的错误
当我们使用 xhr 请求接口若接口不支持跨域时浏览器会在控制台提示错误
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titletrycatch演示/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js/script
/headbodybutton onclickcli()点我/buttonscriptfunction cli() {try {$.get(http://www.baidu.com, function success(data) {console.log(data)})} catch (e) {console.log(e)}}/script
/body/htmlAccess to XMLHttpRequest at https://www.baidu.com/ (redirected from http://www.baidu.com/) from origin null has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource.通过图片中我们可以看到请求接口时产生了跨域错误但并没有进入到catch中。我们通过 xhr.onerror 的监听是可以知道 xhr 请求产生了请求错误的。
2.异步错误
若 try 中异步的模块产生了错误catch 也是捕获不到的例如
// setTimeout中的错误
try {setTimeout(function () {throw new Error(error in setTimeout); // 200ms后会把异常抛出到全局}, 200);
} catch (err) {console.error(catch error, err); // 不会执行
}// Promise中的错误
try {Promise.resolve().then(() {throw new Error(error in Promise.then);});
} catch (err) {console.error(catch error, err); 从运行结果可以看到这两种代码均没有进入到 catch 模块中。
为什么没有进入到catch模块中呢 当异步函数抛出异常时对于宏任务而言执行函数时已经将该函数推入栈此时并不在 try-catch 所在的栈所以 try-catch 并不能捕获到错误。对于微任务而言比如 promisepromise 的构造函数的异常只能被自带的 reject 也就是.catch 函数捕获到。
捕获异步的错误 答案就是把 try-catch 放到异步代码的里面。
1.将try-catch放到setTimeout内部
// 将try-catch放到setTimeout内部
setTimeout(() {try {throw new Error(error in setTimeout);} catch (err) {console.error(catch error, err);}
}, 200);2.将try-catch放到then内部
// 将try-catch放到then内部
Promise.resolve().then(() {try {throw new Error(error in Promise.then);} catch (err) {console.error(catch error, err);}
});3.使用Promse自带的catch捕获异常
// 使用Promse自带的catch捕获异常
Promise.resolve().then(() {throw new Error(error in Promise.then);}).catch((err) {console.error(Promise.catch error, err);
});Promise 有一个很大的优势是它自带着异常捕获方法catch()在 then()方法产生错误导致代码无法运行时会自动进入到 catch()方法中。因此建议写 Promise 时都把 catch()写上否则未捕获的异常就会冒泡到全局。
3.async-await 的异常如何捕获
await可与.catch()同时使用。try/catch 能捕获所有异常, .catch只能捕获异步方法中reject错误
也就是说,如果只想捕获 异步方法中reject错误的话,在使用await的同时使用.catch()就能捕获到。但捕获不到reject之外的异常。
如下图:
1.同时使用捕获到了reject异常:
const foo(){return new Promise((resolve, reject) {throw new Error(throw 错误)});}
await foo().catch(e{console.log(捕获到了:e)});2.捕获不到reject之外的异常,直接报错: (这种情况就需要使用try/catch捕获处理了) const foo(){throw new Error(throw 错误);return new Promise((resolve, reject) {resolve(resolve 错误)});}
await foo().catch(e{console.log(捕获到了:e)});但这种捕获异常后外层的 catch()方法就捕获不到异常了不再继续向外层冒泡了。正确的做法是底层模块产生的错误应当直接抛出给业务层让业务层决定这个错误怎么处理而不是直接吞掉。
4.多层 try-catch
多层 try-catch 时会被最内层的 catch()方法捕获到然后就不再向外层冒泡
try {try {throw new Error(error);} catch (err) {console.error(内层的catch, err); // 内层的catch Error: error}
} catch (err) {console.error(最外层的catch, error);
}js 中出现的错误类型。
在了解使用try-catch之前我们先来了解下 js 中有哪些个原生的错误类型。
js 代码在运行时可能产生的错误错误共有 6 种类型
语法错误SyntaxError类型错误TypeError范围错误RangeErroreval 错误EvalError引用错误ReferenceErrorURI 错误URIError
这些错误类型都继承自Error类。
1、语法错误SyntaxError
语法错误通常是开发者在开发过程代码语句写的有问题浏览器无法对其进行解析
const a;错误信息
VM202:1 Uncaught SyntaxError: Unexpected token ;2、类型错误TypeError
类型错误通常会出现在两种情况
操作符使用在了不适当的类型变量上例如对数字类型使用 concat 操作操作的变量遇到不可预期的 null 或者 undefined 值
const obj {};
obj.concat([1]);错误信息
VM211:2 Uncaught TypeError: obj.concat is not a functionat anonymous:2:5const a null;
a.nickname; //VM218:2 Uncaught TypeError: Cannot read properties of null (reading nickname)at anonymous:2:3在编写一些方法供给其他模块调用时当在检查到参数传入为空或者 null等空置时可以抛出TypeError的错误。
3、范围错误RangeError
该错误通常是因为传入的参数超出了规定的范围。例如toFixed()方法可以接受 0-100 范围内的数值当超过这个范围时就会抛出该错误。
Math.PI.toFixed(105); // Uncaught RangeError: toFixed() digits argument must be between 0 and 1004、eval 错误EvalError
这种错误一般很少会遇到因为使用 eval 操作时即使不正当的错误也会抛出其他类型的错误。
new eval(); // Uncaught TypeError: eval is not a constructor
eval 1234; // 正确执行5、引用错误ReferenceError
引用错误表示师徒访问一个未经声明的变量
console.log(nick); // Uncaught ReferenceError: nick is not defined6、URI 错误URIError
该错误通常是一些操作 uri 函数抛出的错误主要包括encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent(), escape(), unescape()。
decodeURIComponent(%); // Uncaught URIError: URI malformed
decodeURIComponent(%23); // # 正确执行自定义错误类型
对于稍微大点的模块我们想自定义一些错误类型通过这些错误类型就能看出是某个模块抛出的错误。该怎么写呢
我们自定义的错误类型也是要继承自Error类的实现起来非常简单
class FingerError extends Error {constructor(message) {super(message);this.name FingerError; // 该错误的名称Error.captureStackTrace(this, this.constructor); // 获取错误堆栈的信息}
}const err new FingerError(get name error);
console.error(err); // FingerError: get name error
err instanceof FingerError; // true总结
前端中还有很多种产生错误的方式的我们平时就要注意避免这些错误。我们接下来也可以从错误监控的角度来分析下如何来监控页面中出现的错误和错误类型。
