理解异步之美--- Promise与async await(一)

本篇旨在以通俗的语言去解释题目的内容,还希望各位小伙伴们,能够通读下来。如果表达有误的地方,还望评论区指出不多哔哔,坐稳扶好,发车了

你可能会放出一个怪物

异步与同步相比,最难以掌控的就是异步的任务会什么时候完成和完成之后的回调问题。

难以掌控的触发状态,让你自己写的代码当时还可以读懂,但是过几天半个月之后如果不重新盘一边逻辑,你哪知道哪个内容会先执行借用这么一个例子

listen( "click", function handler(evt){
	setTimeout( function request(){
		ajax( "http://some.url.1", function response(text){
			if (text == "hello") {
				handler();
			}
			else if (text == "world") {
				request();
			}
		} );
	}, 500) ;
} );

doSomething();

很难以理解这种地狱式的回调(回调地狱)会对可读性有多么大的摧毁。

首先 执行listern()

其次 doSomething()

500ms(或者更远)后执行ajax()

ajax完成后

如果text === hello 执行handler()

如果text === world 执行request()

难受吗???

在你不知道的javascript一书中,对于回调的信任问题做了阐述
当你使用第三方的库的方法处理回调时很有可能遇到以下信任内容:

怎么解决???? 这种信任问题该怎么办?

事实证明 你需要一个承诺

当你把一件事情交给别人去做(可能马上就能完成的也可能是需要一段时间的)这个人在任务完成或者失败后都会给你一个回应,这样的人你是不是特别放心的把事情交给他,他没回应你那么他是正在办事、回应你了就是成功了或者失败了。

在javascript中这样的人就是Promise。

Promise的实例有三个状态,Pending(进行中)、Resolved(已完成)、Rejected(已拒绝)。当你把一件事情交给promise时,它的状态就是Pending,任务完成了状态就变成了Resolved、没有完成失败了就变成了Rejected。

言归正传:写一个简单的promise

let promise = new Promise((resolve,reject)=>{
    // 接收一个callback。参数是成功函数与失败函数
	setTimeout(()=>{
       let num = parseInt(Math.random()*100);
       // 如果数字大于50就调用成功的函数,并且将状态变成Resolved
       if(num > 50){
          resolve(num);
       }else{
        // 否则就调用失败的函数,将状态变成Rejected
          reject(num)
       }
	},10000)
})

当Promise执行的内容符合你预期的成功条件的话,就调用resolve函数,失败就调用reject函数,这两个函数的参数会被promise捕捉到。可以在之后的回调中使用。

创建一个承诺我们已经做完了,那么如何使用承诺后的结果呢?

promise.then(res=>{
    console.log(res);
    //在构造函数中如果你执行力resolve函数就会到这一步
},err=>{
    // 执行了reject函数会到这一步
    console.log(err);
})

then方法接收两个函数,第一个是承诺成功(状态为resolved)的回调函数,一个承诺失败(状态为rejected)的回调函数。

then方法的返回值不是一个promise对象就会被包装成一个promise对象,所以then方法支持链式调用。

promise.then(res=>{ return 42}).then(res=>{console.log(res)})
// 打印出42

then方法的链式调用可以帮我们串行的解决一些逻辑,当我们平时书写有顺序的异步时间,比如

ajax('first');
ajax('second');
ajax('third');
需要按顺序来执行怎么办?
ajax('first').success(function(res){
    ajax('second').success(function(res){
        ajax('third').success(function(res){
            //串行完毕可以执行你想要的内容了
        });
    })
})
多么美丽而又让人望而却步的三角形啊!!

如果使用then的链式调用呢?

let promise = new Promise((resolve,reject)=>{
    ajax('first').success(function(res){
        resolve(res);
    })
})
promise.then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{
    // 串行完毕你要做的xxx可以开始了
})

而且每次执行resolve的时候,都可以把每次ajax的回调数据进行传递到最后。清晰简单明了。

说完串行了,那么并行怎么办???
当有多个异步事件,之间并无联系而且没有先后顺序,只需要全部完成就可以开始工作了。

串行会把每一个异步事件的等待时间进行一个相加,明显会对完成进行一个阻塞。那么并行的话该怎么确定全部完成呢?

Promise.all 与 Promise.race的妙用

Promise.all 接收一个数组,数组的每一项都是一个promise对象。当数组中所有的promise的状态都达到resolved的时候,Promise.all的状态就会变成resolved,如果有一个状态变成了rejected,那么Promise.all的状态就会变成rejected(任意一个失败就算是失败),这就可以解决我们并行的问题。调用then方法时的结果成功的时候是回调函数的参数也是一个数组,按顺序保存着每一个promise对象resolve执行时的值。

let promise1 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(1);
	},10000)
});
let promise2 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(2);
	},9000)
});
let promise3 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(3);
	},11000)
});
Promise.all([promise1,promise2,promise3]).then(res=>{
    console.log(res);
    //[1,2,3] 证明与哪个promise的状态先变成resolved无关
})

let promise1 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       reject(1);
	},10000)
});
let promise2 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(2);
	},9000)
});
let promise3 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(3);
	},11000)
});
let promiseAll =Promise.all([promise1,promise2,promise3]);
promiseAll.then(res=>{
    console.log(res);
},err=>{
    console.log(err)
})


看结果不难看出来符合之前所说的

Promise.race 竞速模式 也是接受一个每一项都是promise的数组。但是与all不同的是,第一个promise对象状态变成resolved时自身的状态变成了resolved,第一个promise变成rejected自身状态就会变成rejected。第一个变成resolved的promsie的值就会被使用。

let promise1 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       reject(1);
	},10000)
});
let promise2 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(2);
	},9000)
});
let promise3 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(3);
	},11000)
});
Promise.race([promise1,promise2,promise3]).then(res=>{
	console.log(res);
	//打印出2 为什么不打印出1呢?因为promise2先完成了其余的就忽略来
},rej=>{
    console.log('rejected');
    console.log(rej)};
)
// 大家可以尝试自己改变时间进行测试

Promsie.race还有一个很重要的实际用处就是,有时候我们要去做一件事,但是超过三秒钟左右我们就不做了那怎么办?
这个时候可以使用Promise.race方法

Promise.race([promise1,timeOutPromise(3000)]).then(res=>{})
// timeOutPromise延时3s左右 由于是用setTimeout来实现的并不一定准确3s(一般主线程在开发中不会阻塞3s以上的所以不会有太大问题)

这就是我对于Promise的一些基本理解。


吐槽

很难受的一件事 白天辛苦写的1736个字的内容莫名其妙的被我删掉了。。。。。内容都去哪了??? 很蓝瘦。。。 所以晚上又重新梳理了一遍。

下一期的内容是针对于网上常见的Promise的自我实现进行一个分析,总之一句话抓住Promise的承诺思想,就可以很好的去编写promise的代码。

async 与await将会在下期或者下下期进行讲解。(很抱歉,想一口气讲完的但是内容太多,我也需要慢慢梳理争取给大家一个高质量的文章,)

之后内容会比这一期难度高上一些,大家可以安心等待,下一篇的到来。


我是一个应届生,最近和朋友们维护了一个公众号,内容是我们在从应届生过渡到开发这一路所踩过的坑,已经我们一步步学习的记录,如果感兴趣的朋友可以关注一下,一同加油~

这里写图片描述

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Async/awaitPromise 是 JavaScript 中用于处理异步任务的两种不同技术。Async/await 是基于 Promise 的,它是一种更简洁,更易读的方式来完成异步任务。Async/await 是一种“暂停”和“继续”的方式,可以帮助编写更加清晰和优雅的异步代码。Promise 是一种非阻塞的方式来完成异步任务,它提供了一种定义任务的标准,可以让异步任务更容易理解和管理。 ### 回答2: async/await是ES2017引入的用于处理异步操作的语法糖,它是建立在Promise的基础上的。 Promise是一种用于处理异步操作的对象,它有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。通过调用Promise的then()方法和catch()方法,我们可以分别处理成功和失败的情况。 而async/await是让我们以同步的方式编写异步代码的方法,它基于Promise,提供了一种更简洁、更易读的方式来处理异步操作的结果。 通过在函数前面添加async关键字,我们可以声明一个异步函数,这个函数会返回一个Promise对象。在异步函数内部,我们可以使用await关键字来暂停函数的执行,等待Promise对象的状态变为fulfilled或rejected。在await后面,我们可以写上一个Promise对象,然后使用一个变量来接收这个Promise对象fulfilled的值。 使用async/await可以使我们的代码更加清晰和简洁,而不需要在每个异步操作中都写.then()和.catch()方法。我们可以通过try-catch结构来处理异步操作的错误,使得代码更容易理解和维护。 总而言之,async/await是基于Promise的一种用于处理异步操作的语法糖,它能够以更简洁、更易读的方式来处理异步操作的结果,使得我们的代码更加清晰和易于理解。 ### 回答3: async/awaitPromise是JavaScript中处理异步操作的两种不同的机制。 Promise是ECMAScript 6引入的一种标准化的处理异步操作的方案。它是一个对象,表示一个尚未完成但最终会被解决的操作。通过.then()和.catch()方法,我们可以在Promise对象中指定操作成功或失败后要执行的代码。 async/await是在ES8中引入的语法糖,它基于Promise,使异步代码的书写更加简洁。通过在函数前面添加async关键字,可以将该函数定义为一个异步函数。在异步函数内部,我们可以使用await关键字来暂停执行,等待Promise对象的解决,并返回解决后的值。 async/await的优点在于可以使异步代码看起来像同步代码一样,更加清晰易读。它通过暂停函数的执行,避免了回调地狱和多层嵌套的问题。同时,它兼容Promise,可以使用Promise.all()、Promise.race()等方法处理多个异步操作。 使用async/await时,我们可以通过try-catch语句来捕获异步操作的错误。在异步函数内部可以使用多个await语句,用于按顺序执行多个异步操作。 需要注意的是,async/await只能在原生支持Promise的环境中使用。但是,可以使用Babel等工具将其转换为ES5代码,以便在不支持Promise的旧浏览器中使用。 综上所述,async/await是基于Promise的一种改进,并提供了更加简洁和可读性强的书写方式,用于处理JavaScript中的异步操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值