Promise以及async/await解决回调

一、函数对象与实例对象

函数对象：将函数作为对象使用时，简称为函数对象
实例对象：new函数产生的对象，简称为对象

function Fn(){ //Fn函数
}
const fn=new Fn() //Fn是构造函数  fn是实例对象（对象）
console.log(Fn.prototype)//Fn是函数对象
Fn.call({}) //Fn是函数对象
$("#test")//jquery函数
$.get("/test")//jquery函数对象
//可以理解为：括号前面是函数 .的前面是对象（实例对象 函数对象）

二、两种类型的回调函数

同步回调

理解：立即执行，完全执行完了才结束，不会放入回调队列中
例子：数组遍历相关的回调函数 Promise的excutor函数

const arr=[1,3,5]
arr.forEach(item=>{ //遍历回调  同步回调函数 不会放入队列 立即执行
    console.log(item)
})
console.log("forEach()之后")

执行结果：

异步回调

理解：不会立即执行，会放入回调队列中将来执行
例子：定时器回调 ajax回调 Promise的成功、失败的回调

setTimeout(()=>{  //异步回调函数 会放入队列中将来执行
    console.log("timeout callback()")
},0)
console.log("setTimeout()之后")

执行结果：

三、JS的error处理

1、 错误的类型：

1、Error:所有错误的父类型
2、ReferenceError：引用的变量不存在

console.log(a) //ReferenceError: a is not defined
console.log(…) //没有捕获error 下面的代码不会执行

3、TypeError：数据类型不正确的错误

let b
console.log(b.xxx)

4、RangeError：数据值不在其所允许的范围内
5、SyntaxError：语法错误

2、错误处理

捕获错误：try…catch

try{
   let d
   console.log(d.xxx)
}catch(error){
  console.log(error.message)
  console.log(error.stack)//message stack 是error的两个属性
}

抛出错误：throw error

function something(){
if(Date.now()%2===1){
 console.log("当前时间是基数，可以执行")
 }else{
  throw new Error("当前时间是偶数无法执行")
 }
}
//捕获处理异常
try{
 something()
}catch(error){
   alert(error.message)
}

四、Promise

1、理解：Promise是js中进行异步编程的新的解决方案
从语法上来说：Promise是一个构造函数
从功能上来说：Promise对象用来封装一个异步操作并可以获取其结果
2、Promise的三种状态：（初始）pending、resolved、rejected
状态的改变：
（1）pending变为resolved（成功）
（2）pending变为rejected （失败）
说明：只有这两种改变，且一个Promise对象只能改变一次 无论变为成功还是失败，都会有一个结果数据
成功的结果数据一般称为value，失败的结果数据一般称为reason

Promise流程图：

//1 创建一个Promise对象
const p=new Promise((resolve,reject)=>{ //执行器函数 同步回调
//执行异步操作任务
setTimeout(()=>{
   const time=Date.now()//如果当前时间是偶数代表成功，否则代表失败
   //如果成功了，调用resolve(value)
   if(time%2==0){
     resolve("成功的数据，time"+time)
   }else{
     reject("失败的数据，time"+time)
   }
 },1000);
})
p.then(
  value=>{// 接收得到成功的value数据  onResolved
     console.log("成功的回调"，value)
  },
  reson=>{//接收得到失败的reason数据 onRejected
    console.log("失败的回调"，reason)
  }
)

执行如下：

Promise.then()返回的新的promise的结果状态由什么决定？
（1）简单表达：由then()指定的回调函数执行的结果决定
（2）详细表达：
1、如果抛出异常，新promise变为rejected，reason为抛出的异常
2、如果返回的是非promise的任意值，新promise变为resolved，value为返回的值
3、如果返回的是另一个新的promise，此promise的结果就会成为新的promise的结果

promise如何串联多个操作任务？
（1）Promise的then()返回一个新的promise，可以写成then()的链式调用
（2）通过then的链式调用串联多个同步、异步任务

五、async/await

async function用来定义一个返回AsyncFunction对象的异步函数，异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的Promise返回其结果

await操作符用于等待一个promise对象，它只能在异步函数async function中使用

1、async函数
函数的返回值为promise对象
promise对象的结果由async函数执行的返回值决定
2、await表达式
await右侧的表达式一般为promise对象，但也可以是其他的值
如果表达式是promise对象，await返回的是promise成功的值
如果表达式是其他值，直接将此值作为await的返回值
3、注意：
await必须写在async函数中，但async函数中可以没有await
如果await的promise失败了，就会抛出异常，需要通过try…catch 来捕获处理

setTimeout(()=>{
  console.log(1)//宏队列
},0)
 new Promise((resolve)=>{
  console.log(2)//同步任务
  resolve()
 }).then(()=>{
  console.log(3)//微队列
 }).then(()=>{
  console.log(4)//微队列
 })
 console.log(5)//同步任务
 //2 5 3 4 1