js的三种异步处理
Promise 对象
- 含义： Promise是异步编程的一种解决方案，
- 优点： 相比传统回调函数和事件更加合理和优雅，Promise是链式编程（后面会详细讲述），有效的解决了令人头痛的回调地狱问题，Promise的结果有成功和失败两种状态，只有异步操作的结果，可以决定当前是哪一种状态，外界的任何操作都无法改变这个状态
- 基本用法：
//ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。
const p = new Promise(function(resolve,reject){
if(success){
resolve('成功的结果')
}else{
reject('失败的结果')
}
})
p.then(function (res) {
// 接收resolve传来的数据，做些什么
},function (err) {
// 接收reject传来的数据，做些什么
})
p.catch(function (err) {
// 接收reject传来的数据或者捕捉到then()中的运行报错时，做些什么
})
p.finally(function(){
// 不管什么状态都执行
})
- 常用API
- resolve 返回异步操作成功的结果
- reject 返回异步操作失败的结果
- then 执行Promise状态是成功的操作
- catch 执行Promise状态是失败的操作
- finally 不管Promise状态是成功或失败都执行的操作
- Promise.all
- Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
const p = Promise.all([p1, p2, p3])
p的状态由p1、p2、p3决定，分成两种情况。
（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
Generator 函数
- 含义： Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同，
-
- 基本用法：
function* helloGenerator() {
yield 'hello';
yield 'Generator';
return 'over';
}
let hw = helloGenerator();
hw.next()//{value:"hello",done:false}
hw.next()//{value:"Generator",done:false}
hw.next()//{value:"over",done:true}
hw.next()//{value:undfined,done:true}
- 特征：
- 一是，function关键字与函数名之间有一个星号；
- 二是，函数体内部使用yield表达式，定义不同的内部状态；
- 三是，通过next方法获取每段状态的返回结果,上面分成4次执行了Gennrator函数，第一次，获取第一个yield函数的返回结果并暂停，done:false，代表函数内的状态还没有执行结束；第二次，同理；第三次，获取return 的返回结果，done:true表示函数内的状态已经执行完毕；第四次，函数内已经没有可以执行的状态，所有返回undfined，同时告诉函数内的状态已经执行完毕；如果函数内没有return，在第三次时返回undfined，done:true表示函数内的状态已经执行完毕
async 函数
- 含义： async 函数是在ES2017 标准中引入的，async使得异步操作变得更加方便，其实他就是Generator 函数的语法糖
- 基本用法：
function get1(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{resolve(1)},2000)
})
}
async function getSet(){
const n = await get1()
//const n = await '111'
return n
}
getSet().then(console.log)
- 说明：
- await命令只能用在async函数之中，如果用在普通函数，就会报错。
- await后面是一个Promise对象，如get1 return出去的Promise实例；如果不是 Promise 对象，就直接返回对应的值，如直接返回'111'。
- 1、若Promise 对象, 并且其以值 x 被 fulfilled, 则返回值为 x.
- 2、Promise 对象, 并且其以异常 e 被 rejected, 则抛出异常 e
- async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，如果任何一个await语句后面的 Promise 对象变为reject状态或遇到return，那么整个async函数都会中断执行。
- 另外需要注意的是, await 在等待 Promise 对象时会导致 async function 暂停执行, 一直到 Promise 对象决议之后才会 async function 继续执行.
- 如果我们希望即使前一个异步操作失败，也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面，这样不管这个异步操作是否成功，第二个await都会执行。
async function f() {
try {
await Promise.reject('出错了');
} catch(e) {
}
return await Promise.resolve('hello world');
}
f().then(v => console.log(v))
- 优点： 相比Generator函数，async函数有如下四点改进
- 内置执行器： Generator 函数的执行必须靠next()进行每一次的模块执行，async自带执行器，只需要和普通函数一样调用即可执行
- **更好的语义：**async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
- 返回值是Promise： async函数的返回值是 Promise 对象，可以用then方法指定下一步的操作；而且async函数完全可以看做多个异步函数的操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖，即Promise.all()的用法
- **更广的适用性：**相较于Generator函数async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）
- 补充
- 多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。
//此处省略getFoo(), getBar()两个函数
// 写法一
async function getSet(){
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
return [foo, bar]
}
// 写法二
async function getSet(){
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
return [foo, bar]
}
*文章参考ECMAScript 6 入门 *