异步编程的实现方式以及区别
1.异步编程的实现方式?
JavaScript中的异步机制可以分为以下几种:
━ 回调函数的方式,使用回调函数的方式有一个缺点是,多个回调函数嵌套的时候会造成回调地狱,上下两层的回调函数间的代码耦合度太高,不利于代码的可维护
━ Promise的方式,使用Promise的方式可以将嵌套的回调函数作为链式使用。但是使用这种方法,有时会造成多个then的链式调用,可能会造成代码的语义不够明确。
━ generator的方式,它可以在函数的执行过程中,将函数的执行权转义出去,在函数外部还可以将执行权给转移回来。因此在generator内部对于异步操作的方式,可以以同步的顺序来书写,使用这种方式需要考虑的问题是何时将函数的控制权转移回来,因此需要有一个自动执行generator的机制,比如说co模块等方式来实现generator的自动执行,
━ async函数的方式,async函数是generator和promise实现的一个自动执行的语法糖,它内部自带执行器,当函数内部执行到一个await语句的时候,如果语句返回一个promise对象,那么函数将会等待promise对象的状态变为resolve后再继续向下执行。因此可以将异步逻辑,转化为同步的顺序来书写,并且这个函数可以自动执行。
2.setTimeout、Promise、Async/Await 的区别
(1)setTimeout
console.log('script start') //1. 打印 script start
setTimeout(function(){console.log('settimeout') // 4. 打印 settimeout
}) // 2. 调用 setTimeout 函数,并定义其完成后执行的回调函数
console.log('script end') //3. 打印 script start
// 输出顺序:script start->script end->settimeout
(2)Promise
Promise本身是 ‘同步的立即执行函数’, 当在executor中执行resolve或者reject的时候, 此时是异步操作, 会先执行then/catch等,当主栈完成后,才会去调用resolve/reject中存放的方法执行,打印p的时候,是打印的返回结果,一个Promise实例。
console.log('script start')
let promise1 = new Promise(function (resolve) {console.log('promise1')resolve()console.log('promise1 end')
}).then(function () {console.log('promise2')
})
setTimeout(function(){console.log('settimeout')
})
console.log('script end')
// 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout
当JS主线程执行到Promise对象时:
promise1.then() 的回调就是一个 task
promise1 是 resolved或rejected: 那这个 task 就会放入当前事件循环回合的 microtask queue
promise1 是 pending: 这个 task 就会放入 事件循环的未来的某个(可能下一个)回合的 microtask queue 中
setTimeout 的回调也是个 task ,它会被放入 macrotask queue 即使是 0ms 的情况
(3)async/await
async function async1(){console.log('async1 start');await async2();console.log('async1 end')
}
async function async2(){console.log('async2')
}
console.log('script start');
async1();
console.log('script end')
// 输出顺序:script start->async1 start->async2->script end->async1 end
async 函数返回一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再执行函数体内后面的语句。可以理解为,是让出了线程,跳出了 async 函数体。
例如:
async function func1() {return 1
}
console.log(func1())
func1的运行结果其实就是一个Promise对象。因此也可以使用then来处理后续逻辑。
func1().then(res => {console.log(res); // 30
})
await的含义为等待,也就是 async 函数需要等待await后的函数执行完成并且有了返回结果(Promise对象)之后,才能继续执行下面的代码。await通过返回一个Promise对象来实现同步的效果。
3. 对Promise的理解
Promise是异步编程的一种解决方案,它是一个对象,可以获取异步操作的消息,他的出现大大改善了异步编程的困境,避免了地狱回调,它比传统的解决方案回调函数和事件更合理和更强大。
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
(1)Promise的实例有三个状态:
Pending(进行中)
Resolved(已完成)
Rejected(已拒绝)
当把一件事情交给promise时,它的状态就是Pending,任务完成了状态就变成了Resolved、没有完成失败了就变成了Rejected。
(2)Promise的实例有两个过程:
pending -> fulfilled : Resolved(已完成)
pending -> rejected:Rejected(已拒绝)
注意:一旦从进行状态变成为其他状态就永远不能更改状态了。
Promise的特点:
对象的状态不受外界影响。promise对象代表一个异步操作,有三种状态,
pending
(进行中)、fulfilled
(已成功)、rejected
(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态,这也是promise这个名字的由来——“承诺”;一旦状态改变就不会再变,任何时候都可以得到这个结果。promise对象的状态改变,只有两种可能:从
pending
变为fulfilled
,从pending
变为rejected
。这时就称为resolved
(已定型)。如果改变已经发生了,你再对promise对象添加回调函数,也会立即得到这个结果。这与事件(event)完全不同,事件的特点是:如果你错过了它,再去监听是得不到结果的。
Promise的缺点:
无法取消Promise,一旦新建它就会立即执行,无法中途取消。
如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
总结: Promise 对象是异步编程的一种解决方案,最早由社区提出。Promise 是一个构造函数,接收一个函数作为参数,返回一个 Promise 实例。一个 Promise 实例有三种状态,分别是pending、resolved 和 rejected,分别代表了进行中、已成功和已失败。实例的状态只能由 pending 转变 resolved 或者rejected 状态,并且状态一经改变,就凝固了,无法再被改变了。
状态的改变是通过 resolve() 和 reject() 函数来实现的,可以在异步操作结束后调用这两个函数改变 Promise 实例的状态,它的原型上定义了一个 then 方法,使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务,会在本轮事件循环的末尾执行。
注意: 在构造 Promise
的时候,构造函数内部的代码是立即执行的
4. Promise的基本用法
(1)创建Promise对象
Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve
和reject.
const promise = new Promise(function(resolve, reject) {// ... some codeif (/* 异步操作成功 */){resolve(value);} else {reject(error);}
});
一般情况下都会使用`new Promise()`来创建promise对象,但是也可以使用`promise.resolve`和`promise.reject`这两个方法
Promise.resolve
Promise.resolve(value)
的返回值也是一个promise对象,可以对返回值进行.then调用,代码如下:
Promise.resolve(11).then(function(value){console.log(value); // 打印出11
});
resolve(11)
代码中,会让promise对象进入确定(resolve
状态),并将参数11
传递给后面的then
所指定的onFulfilled
函数;
创建promise对象可以使用new Promise
的形式创建对象,也可以使用Promise.resolve(value)
的形式创建promise对象;
Promise.reject
Promise.reject
也是new Promise
的快捷形式,也创建一个promise对象。代码如下:
Promise.reject(new Error(“我错了,请原谅俺!!”));
就是下面的代码new Promise的简单形式:
new Promise(function(resolve,reject){reject(new Error("我错了!"));
});
下面是使用resolve方法和reject方法:
function testPromise(ready) {return new Promise(function(resolve,reject){if(ready) {resolve("hello world");}else {reject("No thanks");}});
};
// 方法调用
testPromise(true).then(function(msg){console.log(msg);
},function(error){console.log(error);
});
上面的代码的含义是给testPromise
方法传递一个参数,返回一个promise对象,如果为true
的话,那么调用promise对象中的resolve()
方法,并且把其中的参数传递给后面的then
第一个函数内,因此打印出 “hello world
”, 如果为false
的话,会调用promise对象中的reject()
方法,则会进入then
的第二个函数内,会打印No thanks
;
(2)Promise方法
Promise有五个常用的方法:then()、catch()、all()、race()、finally。下面就来看一下这些方法。
then()
当Promise执行的内容符合成功条件时,调用resolve
函数,失败就调用reject
函数。Promise创建完了,那该如何调用呢?
promise.then(function(value) {// success
}, function(error) {// failure
});
then
方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved
时调用,第二个回调函数是Promise对象的状态变为rejected
时调用。其中第二个参数可以省略。 then
方法返回的是一个新的Promise实例(不是原来那个Promise实例)。因此可以采用链式写法,即then
方法后面再调用另一个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=>{})
那当要写的事件没有顺序或者关系时,还如何写呢?可以使用all
方法来解决。
2. catch()
Promise对象除了有then方法,还有一个catch方法,该方法相当于then
方法的第二个参数,指向reject
的回调函数。不过catch
方法还有一个作用,就是在执行resolve
回调函数时,如果出现错误,抛出异常,不会停止运行,而是进入catch
方法中。
p.then((data) => {console.log('resolved',data);
},(err) => {console.log('rejected',err);}
);
p.then((data) => {console.log('resolved',data);
}).catch((err) => {console.log('rejected',err);
});
3. all()
all
方法可以完成并行任务, 它接收一个数组,数组的每一项都是一个promise
对象。当数组中所有的promise
的状态都达到resolved
的时候,all
方法的状态就会变成resolved
,如果有一个状态变成了rejected
,那么all
方法的状态就会变成rejected
。
let promise1 = new Promise((resolve,reject)=>{setTimeout(()=>{resolve(1);},2000)
});
let promise2 = new Promise((resolve,reject)=>{setTimeout(()=>{resolve(2);},1000)
});
let promise3 = new Promise((resolve,reject)=>{setTimeout(()=>{resolve(3);},3000)
});
Promise.all([promise1,promise2,promise3]).then(res=>{console.log(res);//结果为:[1,2,3]
})
调用all
方法时的结果成功的时候是回调函数的参数也是一个数组,这个数组按顺序保存着每一个promise对象resolve
执行时的值。
(4)race()
race
方法和all
一样,接受的参数是一个每项都是promise
的数组,但是与all
不同的是,当最先执行完的事件执行完之后,就直接返回该promise
对象的值。如果第一个promise
对象状态变成resolved
,那自身的状态变成了resolved
;反之第一个promise
变成rejected
,那自身状态就会变成rejected
。
let promise1 = new Promise((resolve,reject)=>{setTimeout(()=>{reject(1);},2000)
});
let promise2 = new Promise((resolve,reject)=>{setTimeout(()=>{resolve(2);},1000)
});
let promise3 = new Promise((resolve,reject)=>{setTimeout(()=>{resolve(3);},3000)
});
Promise.race([promise1,promise2,promise3]).then(res=>{console.log(res);//结果:2
},rej=>{console.log(rej)};
)
那么race
方法有什么实际作用呢?当要做一件事,超过多长时间就不做了,可以用这个方法来解决:
Promise.race([promise1,timeOutPromise(5000)]).then(res=>{})
5. finally()
finally
方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
上面代码中,不管promise
最后的状态,在执行完then
或catch
指定的回调函数以后,都会执行finally
方法指定的回调函数。
下面是一个例子,服务器使用 Promise 处理请求,然后使用finally
方法关掉服务器。
server.listen(port).then(function () {// ...}).finally(server.stop);
finally
方法的回调函数不接受任何参数,这意味着没有办法知道,前面的 Promise 状态到底是fulfilled
还是rejected
。这表明,finally
方法里面的操作,应该是与状态无关的,不依赖于 Promise 的执行结果。finally
本质上是then
方法的特例:
promise
.finally(() => {// 语句
});
// 等同于
promise
.then(result => {// 语句return result;},error => {// 语句throw error;}
);
上面代码中,如果不使用finally
方法,同样的语句需要为成功和失败两种情况各写一次。有了finally
方法,则只需要写一次。
异步编程的实现方式以及区别相关推荐
- C#异步编程的实现方式(1)——异步委托
异步的实现即多线程,一种简单的方式就是创建一个委托,然后异步调用它. .Net Framework已经为我们提供了委托的异步调用方法.下面介绍三种使用委托实现异步的方法. 1.投票(IsComplet ...
- [转]C#异步编程的实现方式(1)——异步委托
异步的实现即多线程,一种简单的方式就是创建一个委托,然后异步调用它. .Net Framework已经为我们提供了委托的异步调用方法.下面介绍三种使用委托实现异步的方法. 1.投票(IsComplet ...
- C#异步编程的实现方式(4)——Task任务
.Net Framework 4.0新增了一个System.Threading.Tasks命名空间,它包含的类提供了任务的相关操作.使用任务不仅可以获得一个抽象层,还能对底层线程进行很多统一的控制操作 ...
- C#异步编程的实现方式(6)——层次任务
任务也可以构成一个层次结构.一个任务启动一个新任务时,就启动了一个层次结构.下面的代码段在父任务内部新建一个任务.创建子任务的代码与创建父任务的代码相同,唯一的区别是这个任务从另一个任务内部创建: 1 ...
- 异步编程的方式有哪几种?
目录 前言 一.JS任务的执行模式 二.异步编程的六种方式 1.回调函数方式 2.Promise对象 3.事件监听 4.发布/订阅 5.async/await 函数的实现 6.生成器函数 Genera ...
- JS 异步编程都有哪些方案
JS 异步编程都有哪些方案 先一起来回想一下,我们在日常开发中都用过哪些 JS异步编程的方式?总结起来无外乎有这几种:回调函数.事件监听.Promise.Generator.async/await ...
- C#~异步编程续~.net4.5主推的awaitasync应用
返回目录 之前写过两篇关于异步编程的文章,详细可以进入C#~异步编程和C#~异步编程在项目中的使用 .net的各个版本都有自己主推的技术,像.NET1.1中的委托,.NET2.0中的泛型,.NET3. ...
- C#并发编程之异步编程(二)
写在前面 前面一篇文章介绍了异步编程的基本内容,同时也简要说明了async和await的一些用法.本篇文章将对async和await这两个关键字进行深入探讨,研究其中的运行机制,实现编码效率与运行效率 ...
- js 多个定时器_JS中的同步/异步编程
1. 进程(process)/线程(thread) 进程process: 电脑端安装很多的应用软件,每当运行一个应用程序,相当于开辟一个进程(而对于浏览器来说,每新建一个页卡访问一个页面,都是新开辟一 ...
最新文章
- 支付宝支付 第十一集:支付回调成功后的监听
- jquery-easyui环境的搭建及测试
- Debouncing circuit(消抖电路)
- 9. CSS 背景属性
- java生成随机验证图片的实现
- php日期转时间戳,指定日期转换成时间戳
- ubuntu2004 安装protoc
- phpnow php升级,phpnow如何升级php版本
- BottomNavigationView的基本使用
- 计算机中常用的时间换算
- Python去除文本所有标点符号
- Python快速上手攻略
- android车载无线充apple,绿联车载无线充电器,手机支架款安卓苹果双快充模式
- 全系列计算机等级考试题库软件+Office2016
- ROS2报错缺少“diagnostic_updater“,CMake did not find diagnostic_updater. 解决思路
- 2021-2027全球与中国雌二醇(CAS 50-28-2)市场现状及未来发展趋势
- 软件工程中新功能开发流程
- CTime和COleDateTime区别 比较
- 如何使用Graylog来收集日志?
- 图像对齐与拼接之运动模型