JavaScript核心原理精讲第四章 异步编程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
When the push method is called with zero or more arguments, the following steps are taken:


1. Let O be ? ToObject(this value).


2. Let len be ? LengthOfArrayLike(O).


3. Let argCount be the number of elements in items.


4. If len + argCount > 2^53 - 1, throw a TypeError exception.


5. For each element E of items, do


  a. Perform ? Set(O, ! ToString(F(len)), E, true).


  b. Set len to len + 1.


6. Perform ? Set(O, "length", F(len), true).


7. Return F(len).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
Array.prototype.push = function(...items) {


let O = Object(this);  


let len = this.length >>> 0;


let argCount = items.length >>> 0;


if (len + argCount > 2 ** 53 - 1) {


throw new TypeError("The number of array is over the max value")


  }


for(let i = 0; i < argCount; i++) {


    O[len + i] = items[i];


  }


let newLength = len + argCount;


  O.length = newLength;


return newLength;


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
When the pop method is called, the following steps are taken:


1. Let O be ? ToObject(this value).


2. Let len be ? LengthOfArrayLike(O).


3. If len = 0, then


    Perform ? Set(O, "length", +0F, true).


    Return undefined.


4. Else,


  Assert: len > 0.


  Let newLen be F(len - 1).


  Let index be ! ToString(newLen).


  Let element be ? Get(O, index).


  Perform ? DeletePropertyOrThrow(O, index).


  Perform ? Set(O, "length", newLen, true).


  Return element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Array.prototype.pop = function() {


let O = Object(this);


let len = this.length >>> 0;


if (len === 0) {


    O.length = 0;


return undefined;


  }


  len --;


let value = O[len];


delete O[len];


  O.length = len;


return value;


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
When the map method is called with one or two arguments, the following steps are taken:


1. Let O be ? ToObject(this value).


2. Let len be ? LengthOfArrayLike(O).


3. If IsCallable(callbackfn) is false, throw a TypeError exception.


4. Let A be ? ArraySpeciesCreate(O, len).


5. Let k be 0.


6. Repeat, while k < len,


    a. Let Pk be ! ToString(F(k)).


    b. Let kPresent be ? HasProperty(O, Pk).


    c. If kPresent is true, then


        Let kValue be ? Get(O, Pk).


        Let mappedValue be ? Call(callbackfn, thisArg, « kValue, F(k), O »).


        Perform ? CreateDataPropertyOrThrow(A, Pk, mappedValue).


    d. Set k to k + 1.


7. Return A.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Array.prototype.map = function(callbackFn, thisArg) {


if (this === null || this === undefined) {


throw new TypeError("Cannot read property 'map' of null");


  }


if (Object.prototype.toString.call(callbackfn) != "[object Function]") {


throw new TypeError(callbackfn + ' is not a function')


  }


let O = Object(this);


let T = thisArg;


let len = O.length >>> 0;


let A = new Array(len);


for(let k = 0; k < len; k++) {


if (k in O) {


let kValue = O[k];


let mappedValue = callbackfn.call(T, KValue, k, O);


      A[k] = mappedValue;


    }


  }


return A;


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
When the reduce method is called with one or two arguments, the following steps are taken:


1. Let O be ? ToObject(this value).


2. Let len be ? LengthOfArrayLike(O).


3. If IsCallable(callbackfn) is false, throw a TypeError exception.


4. If len = 0 and initialValue is not present, throw a TypeError exception.


5. Let k be 0.


6. Let accumulator be undefined.


7. If initialValue is present, then


    Set accumulator to initialValue.


8. Else,


    Let kPresent be false.


    Repeat, while kPresent is false and k < len,


        Let Pk be ! ToString(F(k)).


        Set kPresent to ? HasProperty(O, Pk).


        If kPresent is true, then


        Set accumulator to ? Get(O, Pk).


        Set k to k + 1.


    If kPresent is false, throw a TypeError exception.


9. Repeat, while k < len,


    Let Pk be ! ToString(F(k)).


    Let kPresent be ? HasProperty(O, Pk).


    If kPresent is true, then


        Let kValue be ? Get(O, Pk).


        Set accumulator to ? Call(callbackfn, undefined, « accumulator, kValue, F(k), O »).


    Set k to k + 1.


10. Return accumulator.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
Array.prototype.reduce  = function(callbackfn, initialValue) {


if (this === null || this === undefined) {


throw new TypeError("Cannot read property 'reduce' of null");


  }


if (Object.prototype.toString.call(callbackfn) != "[object Function]") {


throw new TypeError(callbackfn + ' is not a function')


  }


let O = Object(this);


let len = O.length >>> 0;


let k = 0;


let accumulator = initialValue;  


if (accumulator === undefined) {  


for(; k < len ; k++) {


if (k in O) {


        accumulator = O[k];


        k++;


break;


      }


    }


throw new Error('Each element of the array is empty');


  }


for(;k < len; k++) {


if (k in O) {


      accumulator = callbackfn.call(undefined, accumulator, O[k], O);


    }


  }


return accumulator;


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
function read(url) {


return new Promise((resolve, reject) => {


        fs.readFile(url, 'utf8', (err, data) => {


if(err) reject(err);


            resolve(data);


        });


    });


}


read(A).then(data => {


return read(B);


}).then(data => {


return read(C);


}).then(data => {


return read(D);


}).catch(reason => {


console.log(reason);


});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
let readFilePromise = filename => {


return new Promise((resolve, reject) => {


    fs.readFile(filename, (err, data) => {


if (err) {


        reject(err)


      } else {


        resolve(data)


      }


    })


  })


}


readFilePromise('1.json').then(data => {


return readFilePromise('2.json')


});

1
2
3
4
5
6
7
8
9
10
11
12
let x = readFilePromise('1.json').then(data => {


return readFilePromise('2.json')  


});


x.then()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
readFilePromise('1.json').then(data => {


return readFilePromise('2.json');


}).then(data => {


return readFilePromise('3.json');


}).then(data => {


return readFilePromise('4.json');


});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
readFilePromise('1.json').then(data => {


return readFilePromise('2.json');


}).then(data => {


return readFilePromise('3.json');


}).then(data => {


return readFilePromise('4.json');


}).catch(err => {


})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
function getBannerList(){


return new Promise((resolve,reject)=>{


      setTimeout(function(){


        resolve('轮播数据')


      },300) 


  })


}


function getStoreList(){


return new Promise((resolve,reject)=>{


    setTimeout(function(){


      resolve('店铺数据')


    },500)


  })


}


function getCategoryList(){


return new Promise((resolve,reject)=>{


    setTimeout(function(){


      resolve('分类数据')


    },700)


  })


}


function initLoad(){ 


Promise.all([getBannerList(),getStoreList(),getCategoryList()])


  .then(res=>{


console.log(res) 


  }).catch(err=>{


console.log(err)


  })


} 


initLoad()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const resolved = Promise.resolve(2);


const rejected = Promise.reject(-1);


const allSettledPromise = Promise.allSettled([resolved, rejected]);


allSettledPromise.then(function (results) {


console.log(results);


});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const resolved = Promise.resolve(2);


const rejected = Promise.reject(-1);


const allSettledPromise = Promise.any([resolved, rejected]);


allSettledPromise.then(function (results) {


console.log(results);


});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
function requestImg(){


var p = new Promise(function(resolve, reject){


var img = new Image();


    img.onload = function(){ resolve(img); }


    img.src = 'http://www.baidu.com/img/flexible/logo/pc/result.png';


  });


return p;


}


function timeout(){


var p = new Promise(function(resolve, reject){


    setTimeout(function(){ reject('图片请求超时'); }, 5000);


  });


return p;


}


Promise.race([requestImg(), timeout()])


.then(function(results){


console.log(results);


})


.catch(function(reason){


console.log(reason);


});

1
2
3
4
5
img.onload = function(){ resolve(img); }


img.src = 'http://www.baidu.com/img/flexible/logo/pc/result.png';

1
2
setTimeout(function(){ reject('图片请求超时'); }, 5000);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

从上面的代码中可以看出，采用 Promise 的方式来判断图片是否加载成功，也是针对 Promise.race 方法的一个比较好的业务场景。

综上，这四种方法的参数传递形式基本是一致的，但是最后每个方法实现的功能还是略微有些差异的，这一点你需要留意。

### 总结

好了，这一讲内容就介绍到这了。这两讲，我将 Promise 的异步编程方式带你学习了一遍，希望你能对此形成更深刻的认知。关于如何自己实现一个符合规范的 Promise，在后面的进阶课程中我会带你一步步去实现，这两讲也是为后面的实践打下基础，因此希望你能好好掌握。

我最后整理了一下 Promise 的几个方法，你可以根据下面的表格再次复习。

[外链图片转存中...(img-QMZPvd0x-1657765548312)]

在后续的课程中，我还会继续对 JS 异步编程的知识点进行更详细的剖析，你要及时发现自身的不足，有针对性地学习薄弱的知识。

下一讲，我们来聊聊 Generator 和 async/await，这些语法糖也是你需要掌握的内容。我们到时见。