处理接口报错，防止因为接口问题而导致的页面白屏

一、基础语法

1.错误

• 报错会自动throw(抛出)错误，导致代码停止执行

       我们可以用.catch捕捉promise里的错误，用try...catch捕捉try里的错误，防止代码停止运行。

• 捕获error的属性

interface error {
    name:string, // 错误类型
    message:string, // 错误信息
    stack:string // 堆栈跟踪
}

• 我们可以自定义错误

const err = new Error('Error while executing the code');
const err = new EvalError('Error while executing the code'); // 关于全局eval()函数的错误，不再由js抛出，它的存在是为了向后兼容。
const err = new RangeError('Error while executing the code'); // 超出范围。如[].length = -1。如Math.PI.toFixed(200)，toFixed方法只可接受0～100范围内的数值。
const err = new ReferenceError('Error while executing the code'); // 引用一个不存在的变量。
const err = new SyntaxError('Error while executing the code'); // 使用错误的语法。
const err = new TypeError('Error while executing the code'); // 该值不是预期的类型。
const err = new URIError('Error while executing the code'); // 以错误的方式使用全局URL处理函数。如decodeURI("%%%")。

2. try...catch...finally

• 基本语法

try {
    openFile(file);
    throw new Error('Error while executing the code');
} catch (err) {
    console.log(err.message);
} finally {
    console.log('Finally block always run');
    closeFile(file); // finally经常用于清理资源或关闭流
}

• try...catch只能捕捉同步的代码。也就是说，如果把promise、setTimeout、setInterval等异步代码放在try里，报错的话，后面的代码依然不会执行。我们强烈建议，try...catch里面搭配async...await来捕捉报错。因为async函数里面的代码，是同步执行的，只有await返回了，才会进行下一步。

const getRequest = (params,callBack) => {
    try {
        const res = await axios.post(url, params);
        res.code===200 && callBack && callBack(res.data || [])
    } catch(error) {
        console.log(error.message);
    }
}

​​​​​

• try...catch无法捕捉无效代码
• try...catch嵌套会向上抛出错误

3. promise

new promise((resolve, reject) => {
    if(Math.random > 0.5){
        resolve('成功');
    }else {
        reject('失败');
    }
}).then((value) => {
    console.log(value);
}).catch((err) => {
    console.log(err.message)
}).finally(() => {
    console.log('Finally block always run');
})