JS基础学习-异步

Promise

引用自MDN:
Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。

Promise的三种状态

Promise拥有三种状态,pending(初始状态)、fulfilled(完成)、rejected(失败)。当Promise的resolve或reject方法被调用时,Promise的状态将会被修改为fulfilled或rejectd,在被执行的语句块中如果发生错误则Promise的状态将会被修改为rejected,并且被执行的语句块返回值会被忽略。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let p = new Promise(function (resolve, reject) {
if (1 > 0) {
resolve()
}
else {
reject()
}
})

let onFulfilled = function () {
console.log('Fulfilled')
}
let onReject = function () {
console.log('Reject')
}

p.then(onFulfilled, onReject)

修改Promise状态

Promise通过执行resolve或者reject方法来修改Promise的最终状态(或发生错误则到达rejected状态),在异步操作完成后Promise将会有一个明确的状态,而Promise通过判断自身的最终状态来选择执行对应的状态的回调方法。

除了resolve和reject,promise还有两个常用的静态方法Promise.all以及Promise.race。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let p1 = Promise.resolve('run 1')
let p2 = Promise.resolve('run 2')
let p3 = Promise.reject('oops 3')

Promise.all([p1, p2, p3]).then(function (msgs) {
console.log(msgs)
})

Promise.all([p1, p2]).then(function (msgs) {
console.log(msgs)
})

Promise.race([p1, p2, p3]).then(function (msgs) {
console.log(msgs)
})

Promise.all将在列表中所有的Promise对象到达fulfilled状态后,Promise.all才会到达fulfilled状态,只要列表中有一个Promise对象的状态为rejected,则Promise.all的状态将会是rejected。
Promise.race的状态则是根据列表中最早到达(即从pending状态到达fulfilled或rejected状态)的Promise对象来决定。

不要作死往Promise.race中传递空列表,这样Promise.race将不会决议(即resolve)。
往Promise.all中传递空列表则将会立刻resolve,到达fulfilled状态。

Promise原型方法

Promise.prototype.then(onFulfilled, onRejected)
在Promise对象到达Fulfilled或者Rejected后,将执行对应的方法。then()可以接收Fulfilled和Rejected的回调方法,或者只接收一个Fulfilled方法。

Promise.catch
catch只接收一个onRejection,用于添加一个onRejectrion回调到当前的Promise中,如果当前的Promise状态成为rejected,则直接调用Promise.catch中的回调函数进行处理。在链式Promise中,结尾添加catch有助于定位问题产生于哪个Promise中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let p1 = function () {
return new Promise(function (resolve, reject) {
console.log('resolve1')
resolve(1)
})
}
let p2 = function () {
return new Promise(function (resolve, reject) {
console.log('reject2')
reject(2)
})
}
let p3 = function () {
return new Promise(function (resolve, reject) {
console.log('resolve3')
resolve(3)
})
}

p1().then(p2).then(p3).catch(function (msg) {
console.log(msg)
})

执行结果为:
resolve1
reject2
2


生成器 (Generator)与yield

引用自MDN:
function* 这种声明方式(function关键字后跟一个星号)会定义一个生成器函数 (generator > function),它返回一个 Generator 对象。

1
2
3
4
5
function* generator(i) {
yield i;
yield i+10;
}
var g = generator(10);

文章作者: Ryan
文章链接: https://lrybackinblack.github.io/blog/2018/03/22/JS基础学习-异步/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ryan