19

Bravo!少侠,老夫看您骨骼惊奇,特意奉上此秘籍,祝您早日修仙成功!

要想探究Promise,首先让我们做一些热身工作,明确几个概念.

函数对象与实例对象

函数对象: 将函数作为对象使用
实例对象: new 函数() 产生的对象
// Fn函数是一个极其普通的函数,我们称之为Fn函数
function Fn() {
}
/*
当我们用new关键字修饰Fn函数,此时称Fn函数为构造函数
同时我们约定构造函数的首字母大写
instance称之为实例对象,简称对象
*/
const instance = new Fn()

/*
  众所周知,我们使用obj.funcName()/obj.attr的方式调用方法/属性
*/
//实例对象
instance.toString()
//函数对象
Fn.call()
Fn.prototype

/*
  比如我们熟知的jQuery
*/
//jQuery函数
$('#div') 
//jQuery函数对象
$.ajax()

回调函数的类型

同步回调 
   立即执行,全部执行完才结束,不会放到回调队里中 
   比如: 数组遍历的相关回调函数/Promise的executor函数 
异步回调 
   不会立即执行,会放到回调队里中,将来执行 
   比如: 定时器回调/ajax回调/Promise的成功或失败回调 
/*  
 同步回调 
 */
 const arr = [1,2,3]  
arr.forEach(item => console.log(item))  
console.log("forEach()之后")

结果为 image.png

/*  
 异步回调 
 */
 setTimeout(()=>{  
  console.log("timeout回调")  
},0)  
console.log('setTimeout()之后')

结果为 image.png

Error处理

MDN上的Error文档

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error

1. 错误的类型  
    Error: 所有错误的父类型 
    ReferenceError: 引用的变量不存在 
    TypeError: 数据类型不正确的错误 
    RangeError: 数据值不在其所允许的范围内 
    SyntaxError: 语法错误 
2. 错误处理 
    捕获错误: try ... catch 
    抛出错误: throw error 
3. 错误对象 
    message属性: 错误相关信息 
    stack属性: 函数调用栈记录信息
// 1. 常见的内置错误  
// 1). ReferenceError: 引用的变量不存在  
console.log(foo) // ReferenceError: foo is not defined  
console.log('-----') // 没有捕获error, 下面的代码不会执行  
  
// TypeError: 数据类型不正确的错误  
let b  
console.log(b.xxx) // TypeError: Cannot read property 'xxx' of undefined  
b = {}  
b.xxx() // TypeError: b.xxx is not a function  
  
  
// RangeError: 数据值不在其所允许的范围内  
function fn() {  
  fn()  
}  
fn() // RangeError: Maximum call stack size exceeded  
  
SyntaxError: 语法错误  
const c = """" // SyntaxError: Unexpected string  
  
  
// 2. 错误处理  
// 捕获错误: try ... catch  
try {  
  let d  
 console.log(d.xxx)  
} catch (error) {  
  console.log(error.message)  
  console.log(error.stack)  
}  
console.log('出错之后')  
  
// 抛出错误: throw error  
function something() {  
  if (Date.now() % 2 === 1) {  
    console.log('当前时间为奇数, 可以执行任务')  
  } else {   
    throw new Error('当前时间为偶数无法执行任务')  
  }  
}  
  
// 捕获处理异常  
try {  
  something()  
} catch (error) {  
  console.log(error.message)  
}
代码已同步更新到github上

https://github.com/hnt815/promise

Promise系列文章

Promise从两眼发懵到双眼放光(1)-准备篇
Promise从两眼发懵到双眼放光(2)-Promise基础
Promise从两眼发懵到双眼放光(3)-Promise的几个关键问题(一)
Promise从两眼发懵到双眼放光(4)-Promise的几个关键问题(二)
Promise从两眼发懵到双眼放光(5)-手写Promise之整体结构
Promise从两眼发懵到双眼放光(6)-手写Promise之构造函数
Promise从两眼发懵到双眼放光(7)-手写Promise之then方法和catch方法
Promise从两眼发懵到双眼放光(8)-手写Promise之resolve,reject,all,race方法
Promise从两眼发懵到双眼放光(9)-async和await


ntyang
165 声望29 粉丝

非典型性代码搬运工,搞点儿事情