ES6-11

1
// Promise.all 返回一个全新的Promise
2
var promise = Promise.all([ajax("/api/user.json"), ajax("api/posts.json")]);
3
// 所有的Promise完成，全新的promise才会完成
4
// 所以的异步任务都成功，promise才成功
5
// 只要有一个异步任务失败，promise就失败
6
promise
7
  .then(function (values) {
8
    // 接收的是数组，包含每个异步任务执行的结果
9
    console.log(values);
10
  })
11
  .catch(function (error) {
12
    console.log(error);
13
  });

1
const request = ajax("/api/posts.json");
2
const timeout = new Promise(
3
  (resolve,
4
  (reject) => {
5
    setTimeout(() => reject(new Error("timeout")), 500);
6
  })
7
);
8

9
// Promise.race()将多个异步任务组合后返回一个新的promise对象
10
// 多个异步任务中只要有一个完成（成功或失败），新的promise对象就完成了
11
// 这里如果request请求在500毫秒内请求成功，就返回成功，使用.then方法
12
// 如果500毫秒请求没有返回结果，就会reject一个错误，走到catch
13
Promise.race([require, timeout])
14
  .then((value) => {
15
    console.log(value);
16
  })
17
  .catch((error) => {
18
    console.log(error);
19
  });

1
const p = Promise.all([p1, p2, p3]);
2
p.then(() => {}).catch((err) => {});

1
console.log('global start')
2

3
setTimeout(() => {
4
  console.log('setTimeout')
5
}, 0)
6

7
Promise.resolve()
8
  .then(() => {
9
    console.log('promise')
10
  })
11
  .then(() => {
12
    console.log('promise 2')
13
  })
14
  .then(() => {
15
    console.log('promise 3')
16
  })
17
console.log('global end')
18
计时器最后执行 先执行两个内置命令
19
// global start
20
// global end
21
// promise
22
// promise 2
23
// promise 3
24
// setTimeout

1
/**
2
 * 手撕Promise
3
 * 首先，promise是一个类,传入一个函数作为参数，直接调用
4
 * promise 有三个状态， pending， fulfilled， rejected
5
 * 在 resolve 和 reject调用后状态修改，且状态修改后不能再修改
6
 * 将 resolve 和 reject 中的参数记录下来，作为 then 方法成功和失败回调的参数
7
 * 如果 promise 中执行出错，要捕获错误，可以使用try catch来捕获
8
 * 需要捕获错误的地方包括promise传入的函数执行器，和 then 方法的回调
9
 */
10
const PENDING = "pending";
11
const FULFILLED = "fulfilled";
12
const REJECRED = "rejected";
13
class MyPromise {
14
  constructor(fn) {
15
    try {
16
      // promise 传入一个函数，直接调用，函数的参数为 resolve 和 reject
17
      fn(this.resolve, this.reject);
18
    } catch (err) {
19
      this.reject(err);
20
    }
21
  }
22
  // 定义初始状态
23
  status = PENDING;
24
  // then 方法成功回调的参数
25
  value = undefined;
26
  // then 方法失败回调的参数
27
  error = undefined;
28
  // 初始化存储 then 回调的值
29
  sCallback = [];
30
  fCallback = [];
31
  resolve = (value) => {
32
    // 如果状态不是 pending ，不做修改
33
    if (this.status !== PENDING) return;
34
    // resolve 后将状态修改为成功
35
    this.status = FULFILLED;
36
    // 将结果记录
37
    this.value = value;
38
    // 如果有储存的成功回调，则调用，数组需要循环调用
39
    // this.sCallback && this.sCallback(value)
40
    while (this.sCallback.length) this.sCallback.shift()();
41
  };
42
  reject = (error) => {
43
    // 如果状态不是 pending ，不做修改
44
    if (this.status !== PENDING) return;
45
    // reject 后将状态修改为失败
46
    this.status = REJECRED;
47
    // 将结果记录
48
    this.error = error;
49
    // 如果有储存的失败回调，则调用，数组需要循环调用
50
    // this.fCallback && this.fCallback(error)
51
    while (this.fCallback.length) this.fCallback.shift()();
52
  };
53
  /**
54
   * then 方法参数为成功回调和失败回调
55
   * 根据状态判断执行哪个回调
56
   * 如果是异步调用，执行 then 方法时状态还是 pending，则要将两个回调储存起来
57
   * 储存的方法在 resolve 和 reject 的方法里+
58
   对应的调用
59
   * 同一个promise可能会有多个 then 调用，也就会有多组成功和失败的回调，将异步时回调储存为数组
60
   * then 方法可以链式调用，所以它返回的是一个promise对象，将回调中返回的值作为下一个then方法的参数
61
   * then 方法返回的promise对象不能是自身,将 newPromise 与 返回值进行判断
62
   * 在pending状态也要判断不能返回自身
63
   * then 方法可以不传递参数，不传递参数时，下一个then可以拿到这个then应该拿到的结果
64
   * 所以 then 不传递参数时，相当于把结果传递到下一个then
65
   */
66
  then(
67
    sCallback = (value) => value,
68
    fCallback = (error) => {
69
      throw error;
70
    }
71
  ) {
72
    let newPromise = new MyPromise((resolve, reject) => {
73
      // 这里是同步执行，所以可以将要执行的操作放在这里
74
      if (this.status === FULFILLED) {
75
        setTimeout(() => {
76
          try {
77
            // 调用后获取返回的值
78
            const x = sCallback(this.value);
79
            // 判断返回的值如果是 promise 对象，根据promise的结果进行resolve和reject
80
            // 如果是普通值，直接resolve
81
            // 这个操作在失败是也会调用，所以包装成一个方法
82
            // then 方法不能返回自己，所以将 newPromise 传进去判断
83
            // 但是这里其实拿不到newPromise，可以将这段代码放入 setTimeout 中
84
            // 放入setTimeout 中并不是为了延时，只是为了等 newPromise 创建好了可以引用，所以时间设为0
85
            thenValue(newPromise, x, resolve, reject);
86
          } catch (err) {
87
            reject(err);
88
          }
89
        }, 0);
90
      } else if (this.status === REJECRED) {
91
        setTimeout(() => {
92
          try {
93
            const x = fCallback(this.error);
94
            thenValue(newPromise, x, resolve, reject);
95
          } catch (err) {
96
            reject(err);
97
          }
98
        }, 0);
99
      } else {
100
        // 调用 then 方法时，promise的异步还没执行完，状态还是pending，把两个回调储存
101
        // 判断不能返回自身
102
        this.sCallback.push(() => {
103
          setTimeout(() => {
104
            try {
105
              const x = sCallback(this.value);
106
              thenValue(newPromise, x, resolve, reject);
107
            } catch (err) {
108
              reject(err);
109
            }
110
          }, 0);
111
        });
112
        this.fCallback.push(() => {
113
          setTimeout(() => {
114
            try {
115
              const x = fCallback(this.error);
116
              thenValue(newPromise, x, resolve, reject);
117
            } catch (err) {
118
              reject(err);
119
            }
120
          }, 0);
121
        });
122
      }
123
    });
124
    return newPromise;
125
  }
126
  /**
127
   * 实现finally方法, finally 方法不管promise成功失败都会执行回调
128
   * finally 会将promise的结果往下传
129
   * 可以利用 then 方法来实现
130
   * finally 方法返回一个新的promise对象,由于then方法就是返回一个promise对象，所以直接返回
131
   * 如果finally返回一个promise对象，要等promise对象有了结果，才会执行下方的 then
132
   */
133
  finally(callback) {
134
    return this.then(
135
      (value) => {
136
        return MyPromise.resolve(callback()).then(() => value);
137
      },
138
      (err) => {
139
        return MyPromise.resolve(callback()).then(() => {
140
          throw err;
141
        });
142
      }
143
    );
144
  }
145
  /**
146
   * 实现 catch,catch方法只有一个回调，就是失败回调,返回一个promise
147
   */
148
  catch(callback) {
149
    return this.then(undefined, callback);
150
  }
151
  /**
152
   * 实现一个all方法, all 方法传入一个数组，数组中会有异步调用，返回一个新的promise对象
153
   * 数组中所有异步都成功，将结果以数组形式返回，否则一个出错就出错
154
   */
155
  static all(args) {
156
    let results = [];
157
    let index = 0;
158
    return new MyPromise((resolve, reject) => {
159
      function addData(key, value) {
160
        results[key] = value;
161
        // index代表给results中添加了几个值，如果index和args长度相等，说明全部成功
162
        // 不能用results长度来判断，因为results赋值不是通过 push 方法，而是针对 key 来赋值的
163
        index++;
164
        if (index == args.length) {
165
          resolve(results);
166
        }
167
      }
168
      for (let i = 0; i < args.length; i++) {
169
        // 判断是promise对象还是普通值，普通值直接加入results数组
170
        if (args[i] instanceof MyPromise) {
171
          // promise 对象
172
          args[i].then((value) => {
173
            addData(i, value);
174
          }, reject);
175
        } else {
176
          // 普通值
177
          addData(i, args[i]);
178
        }
179
      }
180
    });
181
  }
182
  /**
183
   * 实现一个Promise.resolve方法
184
   * Promise.resolve方法后面要接 then 方法
185
   * 参数如果是个promise对象，就按照这个promise执行，返回它
186
   * 参数如果是个普通值，创建一个新的promise对象
187
   */
188
  static resolve(value) {
189
    if (value instanceof MyPromise) return value;
190
    return new MyPromise((resolve) => {
191
      resolve(value);
192
    });
193
  }
194
  /**
195
   * Promise.reject 方法，返回一个新的Promise，状态为reject
196
   * 参数原封不动的作为reject的理由
197
   */
198
  static reject(reason) {
199
    return new Promise((resolve, reject) => {
200
      reject(reason);
201
    });
202
  }
203
}
204
function thenValue(newPromise, x, resolve, reject) {
205
  if (newPromise === x) return reject(new TypeError("then方法不能返回自己"));
206
  if (x instanceof MyPromise) {
207
    // 如果是promise对象
208
    x.then(resolve, reject);
209
  } else {
210
    // 如果是普通值
211
    resolve(x);
212
  }
213
}

1
export let school = "尚硅谷";
2

3
export function teach() {
4
  console.log("我们可以教给你开发技能");
5
}

1
let school = "尚硅谷";
2

3
function findJob() {
4
  console.log("我们可以帮助你找工作!!");
5
}
6

7
export { school, findJob };

1
export default {
2
  school: "ATGUIGU",
3
  change: function () {
4
    console.log("我们可以改变你!!");
5
  },
6
};

1
//引入 m1.js 模块内容
2
import * as m1 from "./src/js/m1.js";
3
//引入 m2.js 模块内容
4
import * as m2 from "./src/js/m2.js";
5
//引入 m3.js
6
import * as m3 from "./src/js/m3.js";

1
import { school, teach } from "./src/js/m1.js";
2
import { school as guigu, findJob } from "./src/js/m2.js";
3
import { default as m3 } from "./src/js/m3.js"; //default必须要用别名

1
import m3 from "./src/js/m3.js";