两者都是做异步处理的, 使异步转为同步,目的都是为了解决异步回调产生的“回调地狱”。
同步: 顺序执行,始终和前文保持在一个上下文,可以快速捕获及处理异常。由于js是单线程,当代码量多时容易造成阻塞,耗费时间。
异步: 由浏览器(多线程)提供,解决阻塞,异步任务始终在同步任务全部执行完毕后才执行,像回调函数,ajax、setTimeout。提高了执行效率,节省时间,但是会占用更多资源,不利于对进程控制。
btw… 异步任务其实是可以和同步任务同时进行的,但是异步任务的回调函数(真正的异步)一定是在同步任务全部执行完毕后执行的,因为异步回调任务一定是在js线程中完成的。即异步操作在浏览器线程,而异步执行回到js线程。
回调地狱: 当许多功能连续调用,回调函数层层嵌套,形成一个三角形,造成可读性差,代码可维护性可迭代性差,可扩展性差。
一、什么是promise(承诺)
Promise是ES6中的一个内置对象,(实际是一个构造函数,通过函数可以创建一个promise对象),作用为解决异步调用问题
特点:
①、三种状态:pending(进行中)、resolved(已完成)、rejected(已失败)。只有异步操作的结果可以决定当前是哪一种状态,任何其他操作都不能改变这个状态。
②、两种状态的转化:其一,从pending(进行中)到resolved(已完成)。其二,从pending(进行中)到rejected(已失败)。只有这两种形式的转变。
③、缺点:在pending阶段,无法取消状态,且无法判断pending的进度(是刚开始还是即将结束)
二、使用promise
若需要使用带setTimeout()。其在Chrome中可以传多个参数
setTimeout(function (a, b) {
console.log(a + b);
}, 1000, 20, 50); // 70
创建一个promise实例:
var mypromise = new Promise( ( resolve,reject )=>{ //构造函数new创建对象,函数必须有
// do something...
If( /*异步操作成功*/ ){
resolve(value); // pending---resolve
}else{
reject(error); //pending---reject
}
} )
// 后续操作:执行回调函数.then()方法来操作成功或失败要操作的事情
mypromise .then( (value)=>{
// success
}, (error)=>{
// failure
} )
箭头函数只是初始化promise对象,并且接受了resolve和reject两个函数作为参数。注意if语句不是必要的,只是要表达若异步成功,就调用resolve函数,状态转化,并将value值传递下去,因为promise还有一个.then()方法,即成功(或失败)后的一些操作,这也是resolve和reject内置函数存在的意义。反之若异步失败亦是。
举例: 使用构造函数创建对象
let p = new Promise(function(resolve, reject) {
// Promise() 就是一个构造函数,通过new创建了p对象实例
console.log('i am promise');
var a = 2,b = 1;
if(a>b){
resolve(a);
}else{
reject(error)
}
});
p.then(function(value) { // 执行异步回调函数
console.log('resolved.');
},function(error){
console.log('reject')
});
console.log('Hi!');
// i am promise; Hi; resolved; //可以看出promise是异步的
三、promise.prototype.then()
then()作用:是为promise实例添加状态发生改变时的回调函数。第一个参数(必选)是resolve状态的回调,第二个参数(可选)是reject状态回调的函数
then()方法是promise原型上定义的方法。输出promise.prototype可看到内置对象
then()方法支持链式调用,即上一个方法调用后的结果会传给下一个方法。
等同于:
mypromise.then(function(data) {
console.log('Contents: ' + data);
}).then( function(error) {
console.error('出错了', error);
} )
第一个回调函数完成后,会将结果作为参数,传递到下一个回调函数。
四、promise.prototype.catch()
建议then()不要使用第二个参数,而使用catch()
Promise.then( function(data){ // 建议
//success
} ).catch( function(err){
//error
} )
因为catch() 方法返回的还是一个promise对象,后续可以继续使用then()进行链式调用。
resolve — 对应then。只有调用了resolve才会触发then方法的回调
reject — 对应catch。只有调用了reject才会触发catch方法的回调
五、promise.all()
作用:将多个promise实例包装成一个新的promise实例
Var arr = [1,2,3]
Var p = promise.all(arr).then(…)
其中数组中1,2,3都是promise对象实例。若不是,就会先调用下面讲到的promise.resolve()方法,将参数先转为实例,再下一步处理。
p的状态(成功或失败再执行then回调) 由数组的所有实例对象决定:
1、只有所有实例对象都是resolve,p的状态才resolve。然后返回值也是数组,传递给p的回调函数;
2、当有一个实例被reject了,p状态就会是reject。此时第一个被reject的实例返回值,会传递给p的回调函数。
举例:
var p= [1,2,3,4,5,6].map( function(i){
console.log(i);
} )
promise.all(p).then(...).catch(...)
通过数组map生成6个实例对象,然后作为参数传递promise.all(),只有当全部为resolve时才会调用then()方法,否则调用catch()方法。
六、promise.race()
同五。也是将多个promise实例包装成一个新的promise实例。状态亦是。
Var p = promise.race( [1,2,3] )
七、promise.resolve()
将现有的对象转化为promise对象。看参数的不同分4种情况…
八、promise.reject()
promise.reject(reason)方法也会返回一个新的promise实例,该实例状态为reject。
九、理解promise
其作用就是如果前面的代码非常耗时,就会阻塞后面要执行的代码,所以有异步操作。
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testsettimeout</title>
</head>
<body>
<div class="wrap"></div>
<script>
let promise = new Promise(function(resolve, reject) {
console.log('Promise! 我是Promise对象里的函数,我最早出现是因为我要给后面一个耗时的家伙提供数据a');
var a = 20;
resolve(a);
});
promise.then(function(value) {
console.log('哈哈哈,我得到数据a了,要开始执行喽。我是一个非常耗时的操作,依赖前面的数据,但是我想快一点执行,这有利于用户体验,所以别把我放在后头啊;我被放在了一个新的线程上,不会阻塞别人的');
for (var i = 0; i < 1000000; i++) {
var li = document.createElement("li");
document.querySelector(".wrap").appendChild(li);
}
console.log("执行完毕");
});
console.log('Hi! 我是什么都不依赖的程序,但我也想快一点执行,不能委屈我啊');
</script>
</body>
</html>
// 'Promise! 我是Promise对象里的函数...
// Hi! 我是什么都不依赖的程序...
// 哈哈哈,我得到数据a了,要开始执行喽...
// 执行完毕
在new promise里的函数是立即执行函数,执行顺序:
(匿名函数—Promise!…)-----(若还有同步任务 —Hi! …)—紧接着是promise.then回调函数的执行。所以promise.then()函数才是真正的异步执行。
Async await
Async搭配await是ES7提出的,基于promise实现,也是非阻塞的异步转同步,让代码更加语义化,更有可读性。
Await函数不能单独使用(无效),事实上async函数会返回一个promise对象,可以使用then函数添加回调。执行函数时,一旦遇到await函数就会先返回一个promise对象,等到异步操作完成,再去执行后面的语句,若await异步操作出错,就相当于async返回的promise对象被reject了。
async函数在function前面有个async作为标识,意思就是异步函数,里面有个await搭配使用,await是等待的意思,那么它等待什么呢,它后面跟着什么呢?其实它后面可以放任何表达式,不过我们更多的是放一个返回promise 对象的表达式,它等待的是promise 对象的执行完毕,并返回结果。每到await的地方就是程序需要等待执行后面的程序,语义化很强,下面总结一下async函数的特点:
1. 语义化强
2. 里面的await只能在async函数中使用
3. await后面的语句可以是promise对象、数字、字符串等
4. async函数返回的是一个Promsie对象
5. await语句后的Promise对象变成reject状态时,那么整个async函数会中断,后面的程序不会继续执行
基于上面的async的特点,我们会用到异常捕获机制-----try…catch…
举例:Async搭配await发送异步请求
现在写一个函数,让它返回promise 对象,该函数的作用是2s 之后让数值乘以2
// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num)
}, 2000);
} )
}
// 再写一个async 函数,从而可以使用await 关键字, await 后面放置的就是返回promise对象的一个表达式,所以它后面可以写上 doubleAfter2seconds 函数的调用
async function testResult() {
let first = await doubleAfter2seconds(30);
let second = await doubleAfter2seconds(50);
let third = await doubleAfter2seconds(30);
console.log(first + second + third); // 220
}
testResult(); // 调用
console.log('先执行');
6秒后,控制台输出220, 我们可以看到,写异步代码就像写同步代码一样了,再也没有回调地狱了。
- 代码执行过程:调用testResult函数,然后再里面遇到了await函数,要等待,代码就执行到这,等后面的promise对象执行完毕,拿到promise resolve的值进行返回,然后await才会继续向下执行。
- 具体到 我们的代码, 遇到await 之后,代码就暂停执行了, 等待doubleAfter2seconds(30) 执行完毕,doubleAfter2seconds(30) 返回的promise 开始执行,2秒 之后,promise resolve 了, 并返回了值为60, 这时await 才拿到返回值60, 然后赋值给result, 暂停结束,代码继续执行,执行 console.log语句。
- Async/await相对来说更简洁,不用写很多的then(),不用匿名函数处理。
让try/catch可以同时处理同步和异步处理。在promise中就无法处理,要使用.catch()方法,代码冗余。 - 这里强调一下等待,当js引擎在等待promise resolve 的时候,它并没有真正的暂停工作,它可以处理其它的一些事情,如果我们在testResult函数的调用后面,console.log 一下,你发现 后面console.log的代码先执行。