[前端与HTML]--promise

37 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天

promise:是一个异步代码同步编程的一种解决方法。

promise创建方法:

new Promise(function(resolve,reject){})

promise接受的参数代表的是一个状态,promise一共有三种状态:

1.等待完成状态 pending
2.成功完成状态 fullfiled
3.失败完成的状态 rejectde

pending 当promise对象传入参数的时候就会进入到pedding状态

fullfiled 当函数执行resolve的时候代表函数进入了fullfiled状态

rejected 当函数执行了rejected的时候代表函数进入了rejected状态

当promise进入到fulfiled状态的时候,promise后续的,.then函数就会执行,同时函数能接受一个参数,也就是resolve函数执行传递参数 例如:

let pro=new Promise(function(resolve,reject){
		setTimeout(()=>{
			resolve("我是数据")
			},1000)
		})
	promise.then(data=>{
		console.log(data)
	})	打印(我是数据)
		

当promise进入到rejected状态的时候,promise后续的.catch()函数就会执行,函数接受一个函数作为参数,同时函数能接受一个形数,形参就是rejected执行后传递过来的参数 例如:

let promise=new Promise(function(resolve,reject){
        console.log(1);
        setTimeout(()=>{
            reject("我是数据")
        },1000)
    })
    promise.catch(function(da){
        console.log(da);
    })        打印(1  我是数据)

try / catch错误处理:如果你需要捕捉错误和异常操作就可以使用try catch

异步任务的执行顺序是

同步代码块 -> 微任务 -> 宏任务

async函数内部当执行到任何一个,失败执行的promise以后,后续代码都不会再执行

async的作用:

    1.async是promise相关代码的简写方案
    定义:放在function关键词前面表示,这是一个内部有异步行为的函数,此函数也是一个promise函数

await的作用:

     1.当执行到await的时候js会交出控制权
     2.await必须放在标有async的函数内部,他表示等待,等待后续异步代码执行完毕后往下执行后续的代码
     3.await后面必须是promise实列,如果不是就会通过promise.resolve()将后续的内容转换为promise
     4.如果await后面的promise状态变为成功状态name   await 的返回值就是promise转换成功的结果
     5.如果await后面的promise的结果为失败状态,那么整个async的函数将会终止执行,并将失败的数据传递给async函数promise实例去处理

返回值: async函数的返回值是一个promise实例

该实例的状态取决于async函数的执行状态

如果async函数顺利执行,中间没有异常,则promise实例的状态就为resolve此时接受到的数据就可以在后面的.then中收到

如果async函数执行异常,则promise的实例状态就会变为rejected此时接受到的数据就是报错的内容会在.catch中接收到,async函数内部出现错误以后的代码

            try{
        let ee=await sleep(3000)
    }catch(err){		           ======   let ee=await sleep(3000).catch(err=>{
    	console.log(err);					console.log(err);
			}					})