Promise是什么:
Promise是异步微任务(process.nextTick、Promise.then() catch() finally()等)
用于解决异步多层嵌套回调的问题(回调地狱–小球运动),让代码的可读性更高、更容易维护
小球运动:一个小球元素使其按照右下左上的路径运动,点击后触发回调函数,如果不使用Promise那么就要层层嵌套回调函数
运动到右后 再到下 再到左 再到上,而此时想要修改运动路径的话,修改这一层又一层的代码会非常繁琐,而Promise的then()链就可以很好的解决这个问题
Promise使用:
Promise是ES6提供的一个构造函数,可以使用Promise构造函数new出一个实例,Promise构造函数接受一个函数作为参数,这个函数有两个参数,分别是resolve和reject;
resolve将Promise的状态由等待变为成功(resolved),将异步操作的结果作为参数传递出去;
reject将Promise的状态变为失败(rejected),在异步操作失败时调用,将异步操作报错的错误作为参数传递过去。
实例创建完成后,可以使用then方法分别指定成功或者失败的回调回调函数,也可以使用catch捕获失败,then和catch最终返回的也是一个Promise,所以可以链式调用
Promise的特点:
1.对象状态不受外界影响(Promise对象代表一个异步操作,有三种状态) – pending(等待状态) – resolved(成功状态) – rejected(失败状态)
2.一旦状态改变,就不会再变化,任何时候都可以得到这个结果Promise对象状态的改变只有两种可能,
pending => resolved (then第一个回调)和 pending => rejected(then第二个回调)
(这两个状态为结束状态,表示Promise的生命周期已结束)
3.resolve方法中的参数是then中回调函数的参数,reject方法中的参数是catch中的参数
4.then方法和catch方法返回的都是成功状态的Promise(catch中throw返回失败状态的Promise)
Promise的其他方法:
Promise.finally():当promise状态发生变化时执行(任何变化都执行),不变化不执行
Promise.resolve(value):返回成功状态的Promise对象,并将value转递给对应的then方法
(当resolve函数接收的是promise对象时,后面的then会根据传递的promise对象的状态变化决定执行哪一个回调)
Promise.reject():返回一个失败状态的Promise对象,并将给定的失败信息传递给对应的处理方法
Promise.any():接受一个promise对象集合,当其中的第一个promise成功时,就返回那个成功的promise值,不会等待其他promise全部完成
Promise.all():返回一个新的promise对象,该promise对象在参数对象里接收多个promise对象,参数中的promise都成功时才会触发成功,任意一个promise对象失败都会触发失败
Promise.race():使用第一个返回的promise实例对象,成功就是成功,失败就是失败
Promise.allSettled():该方法的状态无传入promise的状态无关,它永远都是成功的,只会记录下各个promise的表现
(Promise.all、Promise.race、Promise.allSettled传入的若不是promise数组,会将其转换成promise数组,任何可遍历对象都可作为数组)
async/await:
async/await是基于Promise实现的,使得异步代码看起来像同步代码,是写异步代码的新方式
async/await实际上是Generator的语法糖。顾名思义,async关键字,代表后面的函数中有异步操作,await表示等待一个异步方法执行完成
声明异步函数只要在普通函数前加上一个关键字async即可
async函数返回一个Promise对象,(若返回值不是Promise对象也会通过Promise.resolve() 封装成 Promise 对象返回)因此async函数return返回的值可以通过then方法来接收
async function funcA() { return 'hello!'; } funcA().then(value => { console.log(value); }) // hello!
await就是异步等待,等待的是一个Promise,因此await后面应该是一个Promise对象,若不是,也会被转成立即resolve的Promise
async函数被调用后就会开始执行,遇到await后就会等待其后面的异步操作执行完成,接着执行函数体后面的语句
总的来说:async函数调用不会造成代码的阻塞,但是await会造成async函数内部代码的阻塞
async function func() { console.log('async function is running!'); const num1 = await 200; console.log(`num1 is ${num1}`); const num2 = await num1+ 100; console.log(`num2 is ${num2}`); const num3 = await num2 + 100; console.log(`num3 is ${num3}`); } func(); console.log('run me before await!'); // async function is running! // run me before await! // num1 is 200 // num2 is 300 // num3 is 400
func函数执行后先输出了 ‘async function is running!’,接着遇到了await异步等待,函数返回执行后面的同步任务 ‘run me before await!’
同步执行完成后接着await等待的位置继续执行。
可以说:async函数可以看作多个异步任务包装成一个Promise对象,而await命令就是其内部的语法糖
await后面的Promise对象不会总是返回resolved状态,只要一个await后面的Promsie状态变成rejected,整个async都会中断执行
为了避免此情况可以使用try…catch来封装多个await:
async function func() { try { const num1 = await 200; console.log(`num1 is ${num1}`); const num2 = await Promise.reject('num2 is wrong!'); console.log(`num2 is ${num2}`); const num3 = await num2 + 100; console.log(`num3 is ${num3}`); } catch (error) { console.log(error); } } func(); // num1 is 200 // 出错了 // num2 is wrong!
async/await:使得异步代码看起来像同步代码
function sayHi(name) { return new Promise((resolved, rejected) => { setTimeout(() => { resolved(name); }, 2000) }) } async function sayHi_async(name) { const sayHi_1 = await sayHi(name) console.log(`你好, ${sayHi_1}`) const sayHi_2 = await sayHi('李四') console.log(`你好, ${sayHi_2}`) const sayHi_3 = await sayHi('王二麻子') console.log(`你好, ${sayHi_3}`) } sayHi_async('张三') // 你好, 张三 // 你好, 李四 // 你好, 王二麻子
Generator:
generator(生成器)是ES6标准引入的新的数据类型。一个generator看起来像个函数,但可以返回多次。
ES6定义的generator是借鉴了python中的generator概念和语法
函数的概念:一个函数是一段完整的代码,调用一个函数就是传入函数,然后返回结果
函数在执行的过程中,如果没有遇到return语句(没有return,就是隐含return undefined),控制权无法交回给被调用的代码
function foo(x) { return x + x; } var r = foo(1); // 调用foo函数
而generator定义如下:
function* foo(x) { yield x + 1; yield x + 2; return x + 3; }
generator由 function* 定义,并且除了return语句外可以通过 yield 返回多次
举个例子:斐波那契数列
function* fib(max) { var t, a = 0, b = 1, n = 0; while (n < max) { yield a; [a, b] = [b, a + b]; n ++; } return; }
调用generator和函数不同,有两种调用方法,一是调用generator的 next() 方法:
var f = fib(5); f.next(); // {value: 0, done: false} f.next(); // {value: 1, done: false} f.next(); // {value: 1, done: false} f.next(); // {value: 2, done: false} f.next(); // {value: 3, done: false} f.next(); // {value: undefined, done: true}
next()方法会执行generator代码,每次遇到 yield a;就会返回一个对象{value: a, done: false}。每次返回的value就是yield的返回值,done表示这个generator是否已经执行结束
二是直接使用 for…of 循环迭代generator
for (var x of fib(10)) { console.log(x); // 依次输出0, 1, 1, 2, 3, ... }
generator的用处:
由于generator在执行的过程中可以返回多次,所以他看上去像一个可以记住执行状态的函数,利用这一点,通过generator可以实现需要用面向对象才能实现的功能
generator还可以把异步代码变成 “同步” 代码
try { r1 = yield ajax('http://url-1', data1); r2 = yield ajax('http://url-2', data2); r3 = yield ajax('http://url-3', data3); success(r3); } catch (err) { handle(err); }
new关键字的执行过程:(构造函数为Func)
- 创建一个空对象,并将该空对象继承Func.prototype
- 执行构造函数,并将this指向刚刚创建的新对象
- 返回新对象
参考:
https://segmentfault.com/a/1190000015488033
https://www.liaoxuefeng.com/wiki/1022910821149312/1023024381818112#0