前端开发中的try...catch

基本结构

try {
  throw new Error('Hello world');
  console.log('抛出错误后，这里就不会执行了')
} catch (err) {
  // 只有try抛出错误这里才会执行
  console.error(err.message); // Hello world
} finally {
  console.log('无论如何都会执行');
}

catch捕获的Error对象中包含以下属性：

• name：是错误的名称，例如 “Error”, “SyntaxError”, “ReferenceError” 等。
• message：有关错误详细信息的消息。
• stack：是用于调试目的的错误的堆栈跟踪。

JavaScript 有以下内置错误，这些错误是从 Error 对象继承而来的

1. EvalError:表示关于全局eval()函数的错误，这个异常不再由 JS 抛出，它的存在是为了向后兼容。
2. RangeError：当引用一个不存在的变量时，将引发 ReferenceError。
3. SyntaxError：当你在 JS 代码中使用任何错误的语法时，都会引发SyntaxError。
4. TypeError：如果该值不是预期的类型，则抛出TypeError。比如1();
5. URIError：如果以错误的方式使用全局 URI 方法，则会抛出URIError。比如decodeURI("%%%");

try不可独身

try {
  throw new Error('Hello World');
}

ⓧ Uncaught SyntaxError: Missing catch or finally after try

每个try块必须与至少一个catch或finally块，否则会抛出SyntaxError错误。

throw

throw <expression>

throw语句用于引发异常。

// throw基础类型
throw "error";
throw 11;
throw true;
throw {toString: function() { return "I'm an object!"; } };

// throw error对象
throw new Error('通用错误');
throw new SyntaxError('语法错误');
throw new ReferenceError('引用错误');

// throw 自定义错误对象
function ValidationError(message) {
  this.message = message;
  this.name = 'ValidationError';
}
throw new ValidationError('这是我的自定义');

try和throw

try {
  throw new Error('Hello World');
} catch (err) {
  console.error(err.message);// Hello World
}

try失效

try {
  ~!$%   // 无效代码
} catch(err) {
  // 这里捕获不到错误
  console.log("这里不会被执行");
}

报错

➤ ⓧ Uncaught SyntaxError: Invalid or unexpected token

异步捕获

try {
  setTimeout(function() {
    test;   // 未定义变量
  }, 1000);
} catch (err) {
  console.log("这里不会被执行");
}

需要更换一下方式

setTimeout(function() {
  try {
    test;
  } catch(err) {
    console.log("这里会捕获到错误");
  }
}, 1000);

嵌套

try {
  try {
    throw new Error('Hello world');
  } catch (err) {
    throw err; // 将错误向上抛出
  }
} catch (err) {
  console.error(err.message); // Hello world
}

邂逅Promise

Promise.resolve(1)
  .then(res => {
      console.log(res);  // 打印 '1'

      throw new Error('something went wrong');  // throw error

      return Promise.resolve(2);  // 这里不会被执行
  })
  .then(res => {
      // 这里也不会执行，因为错误还没有被处理
      console.log(res);    
  })
  .catch(err => {
      console.error(err.message);  // 打印 'something went wrong'
      return Promise.resolve(3);
  })
  .then(res => {
      console.log(res);  // 打印 '3'
  })
  .catch(err => {
      // 这里不会被执行
      console.error(err);
  })

邂逅async await

function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
}

(async function() {
    try {
      let response = await fetch("http://httpstat.us/500");
      handleErrors(response);
      let data = await response.json();
      return data;
    } catch (error) {
        console.log("Caught", error)
    }
})();