Promise以及async/await解决回调

2022-09-03 09:09:19

一、函数对象与实例对象

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

functionFn(){//Fn函数}const fn=newFn()//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

functionsomething(){if(Date.now()%2===1){
 console.log("当前时间是基数,可以执行")}else{thrownewError("当前时间是偶数无法执行")}}//捕获处理异常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=newPromise((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)newPromise((resolve)=>{
  console.log(2)//同步任务resolve()}).then(()=>{
  console.log(3)//微队列}).then(()=>{
  console.log(4)//微队列})
 console.log(5)//同步任务//2 5 3 4 1
  • 作者:我是你要找的bug
  • 原文链接:https://blog.csdn.net/XUYIGE/article/details/105162793
    更新时间:2022-09-03 09:09:19