当前位置：首页 > news >正文

Es6的promise和async

news 来源：原创 2024/5/16 7:12:46

一、promise
promise将异步的操作以同步的流程表达出来
有三种状态：pending(进行中) fulfied(已成功) rejected(已失败)
一旦状态改变就不会再变1.pending->fulfied 2.pending->rejected
解决层层巧嵌套的回调地狱

1.回调地狱,这个代码写的虽然没有问题，但是输出的时候我们本意是每1s输出一个1，然后在1后边0.5秒输出一次2，但是这段代码执行的时候是异步执行的，所以输出的时候会特别的乱，所谓回调地狱

setInterval(
  ()=>{ 
       console.log(1);
       setInterval(()=>{
       console.log(2)
             },500)
                 },1000
             )

2.Promise

我们用new方法新建一个Promise，其中的代码执行是同步的然后调用resolve()和reject（）函数,当执行成功的时候调用resolve,失败的时候调用reject函数；那么俩个函数在哪定义的呢，在后边.then中第一个箭头函数是reslove的方法，第二个函数是reject的方法。

        new Promise((resolve, reject) => {
             setTimeout(() => {
              console.log(1);
             //成功调用resolve
               resolve();
                 //失败调用reject
                 reject();
            }, 1000)
        }).then(() => {
           setTimeout(() => {
               console.log(2)
           }, 500)
       }
           , () => {
               console.log("请求失败");
           })
        //前边为成功执行的函数 后边为失败的函数

3.all和catch

all 所有都执行才会执行all 有失败就会走到catch,如下代码实例，当我们Promise都执行完成后会输出ok如果有一个执行的时候失败了，就会走到catch函数内

 
        let p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(1);
                // resolve();
                reject();
            }, 1000)
        })
        let p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(2);
                resolve();
            }, 800)
        })
        let p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(3);
                resolve();
            }, 2000)
        })
        Promise.all([p1, p2, p3]).then(
            () => {
                console.log("ok");
            }
        ).catch(() => {
            console.log("失败");
        })

4.race

当最快的代理执行了，那么就会执行race中的函数，注意的是，这里边有失败的也会算，也是去找最快的

     //race 先走到最快的执行race
               let p1 = new Promise((resolve, reject) => {
             setTimeout(() => {
                 console.log(1);
                 // resolve();
                 reject();
             }, 1000)
         })
         let p2 = new Promise((resolve, reject) => {
             setTimeout(() => {
                 console.log(2);
                 resolve();
             }, 800)
         })
         let p3 = new Promise((resolve, reject) => {
             setTimeout(() => {
                 console.log(3);
                 resolve();
             }, 2000)
         })
         Promise.race([p1, p2, p3]).then(
             () => {
                 console.log("ok");
             }
         ).catch(() => {
             console.log("失败");
         })
    </script>

上述面试提问总结：

1.请你解释一下什么是异步什么是同步
2.请你说出你对promise得理解是把异步得方法用同步得方案给解决掉了（真正出现就是为了解决回调地狱得问题）
3.promise 当中一共有三个状态 padding (进行中) fulfied(成功) rejected(失败状态下所执行)
4.all race (all等所有得都执行完再执行all里面得then方法但是只要有一个返回得状态为失败 catch)
5.race （永远是根据时间顺序来的我只看第一个第一个如果是成功那么调用then方法如果第一个失败调用catch）

二、async

1. async await
async规定必须返回得是promise对象，async用来定义异步函数
async定义了一个函数返回时是一个promise对象

await只能在async函数中用，在其他地方用会报错，作用是执行某个函数，等某个函数执行完了再往下走

	 <script>
		 async function first(){
			 return new Promise((resolve,reject)=>{
				 setTimeout(function(){
					
					 //模拟后台给我前端得数据
					 let res = {
						 message:'xiaohei'
					 }
					 resolve(res);
				 },1000);
				 
			 })
		 }
		 
		 async function second(msg){
			 return new Promise((resolve,reject)=>{
				 setTimeout(function(){
					
					 resolve();
				 },2000);
			 })
		 }
		 
		 async function error(){
			 return new Promise((resolve,reject)=>{
				 setTimeout(function(){
					
					 reject({message:'失败了'});
				 },2000);
			 })
		 }
		 
		 
		 //promise 是把异步得方法 用同步得方案给解决掉了
		 
		 async function fn(){
			 console.log(1); // 解构赋值
			 let {message} = await first();
			 console.log(message);
			 await second(message);
			 console.log(3);
			 await error().catch(function(res){
				 console.log(res)
			 })
		 }
		 
		 fn();

其中错误的时候用catch捕获，其中的参数为reject中的实参