0 手写前

  • 该技术解决什么问题-why
    • 回调地狱，比如node读写文件
  • 该技术是怎么解决它的-how
    • Promise的构造函数接收一个参数：函数，并且这个函数需要传入两个参数：
      • resolve ：异步操作执行成功后的回调函数
      • reject：异步操作执行失败后的回调函数
  • 该技术的优点
    • 通过链式调用，减少缩进
    • 消灭if(error)，错误处理单独放到一个函数里，如果不处理就抛到最后
  • 该技术缺点
    • then的链式调用可读性不佳，有时写起来比较麻烦
  • 如何克服这些缺点
    • async/await

1 初始化测试环境

1.1 安装

yarn init -y

yarn global add mocha ts-node

yarn add –dev typescript chai mocha @types/chai @types/mocha

创建tsconfig.json、test/index.ts文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import * as chai from "chai";

// chai提供了断言方法
const { assert } = chai;

// mocha提供了describe和it方法，以及控制台输出
describe("chai的使用", () => {
  it("能判等", () => {
    // @ts-ignore
    assert(1 === 4);
  });
});

在package.json中添加测试命令

1
2
3
4
5

"scripts": {
  // mocha需要借助ts-node中register才能测试ts代码；
  // 匹配test文件夹下全部ts结尾的文件
	"test": "mocha -r ts-node/register test/**/*.ts"
}

运行测试

1

yarn test

2 单元测试驱动编程

2.1 Promise是一个类

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// test/index.ts
import MyPromise from "../src/promise"
describe("MyPromise", ()=>{
	it("是一个类", ()=>{
		assert.isFunction(MyPromise)
		assert.isObject(MyPromise.prototype)
	})
})

// src/promise.ts
export default class MyPromise {}

2.2 Promise实例化时接受一个函数

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

// test/index.ts
it("new Promise(fn)接收一个函数", ()=>{
	// 断言，不传参或传非函数的参数会报错
	assert.throw(()=>{
		new MyPromise()
	})
	assert.throw(()=>{
		new MyPromise(1)
	})
})

// src/promise.ts
export default class MyPromise {
	constructor(fn){
    // 如果参数不是函数会报错
		if(typeof fn !== "function"){
			throw new Error('我只接受函数啊')
		}
	}
}

2.3 Promise实例化对象具有then方法

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

// test/index.ts
it("new Promise(fn)有then方法", ()=>{
	const p = new MyPromise(()=>{})
	assert.isFunction(p.then)
})

// src/promise.ts
export default class MyPromise {
	constructor(fn){
		if(typeof fn !== "function"){
			throw new Error('我只接受函数啊')
		}
	}
	// 添加实例方法then
	then(){}
}

2.4 Promise实例化传递的函数参数立即执行

  • 安装测试方法的库sinon

    1

    yarn add -D sinon sinon-chai @types/sinon @types/sinon-chai

  • 使用

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

    // test/index.ts
import * as sinon from "sinon"
import * as sinonChai from "sinon-chai"
chai.use(sinonChai)

it("new Promise(fn)的fn立即执行", ()=>{
	const fn = sinon.fake()
	new MyPromise(fn)
	// 断言fn被调用了
	assert(fn.called)
})

// src/promise.ts
export default class MyPromise {
	constructor(fn){
		if(typeof fn !== "function"){
			throw new Error('我只接受函数啊')
		}
		fn()
	}
  then(){}
}

2.5 Promise实例对象在执行时，接收resolve和reject两个函数

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

// test/index.ts
it("new Promise(fn)的fn执行时接受resolve和reject两个函数", (done)=>{ // 传递done参数
	new Promise((resolve,reject)=>{
    assert.isFunction(resolve)
    assert.isFunction(reject)
    // 只有上面两个断言都执行了，才算测试完成
    done()
  })
})

// src/promise.ts
export default class MyPromise {
	constructor(fn){
		if(typeof fn !== "function"){
			throw new Error('我只接受函数啊')
		}
    // 先随便传递两个函数即可
		fn(()=>{},()=>{})
	}
  then(){}
}

2.6 Promise实例对象then方法中的success回调会在resolve被调用后执行

 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

// test/index.ts
it("p.then(success)的success回调会在resolve被调用后执行", (done)=>{
	const success = sinon.fake()
	const p = new MyPromise((resolve, reject) => {
	 	// 断言，在resolve执行前，success不会执行
		assert.isFalse(success.called)
		resolve()
		// 之所以设置定时器，是因为resolve的过程是异步的，等待then执行后将success绑定到实例对象，再执行success
		setTimeout(()=>{
			// 断言，在resolve后，success才会执行
			assert(success.called)
			// 保证代码执行完毕才算测试结束
			done()
		})
	})
	p.then(success)
})

// src/promise.ts
export default class MyPromise {
	success = null
	fail = null
  // 调用resolve（第一个参数）时，调用success方法
  resolve(){
    // 由于fn是立即执行的，所以还没等到then方法绑定success回调至实例，就执行了success
    // 因此设置延时，让then先执行，再执行resolve，从而执行success
    setTimeout(() => {
      this.success()  
    }, 0)
  }
  // 调用reject（第二个参数）时，调用failed方法
  reject(){
    setTimeout(() => {
      this.fail()  
    }, 0)
  }
	constructor(fn){
		if(typeof fn !== "function"){
			throw new Error('我只接受函数啊')
		}
    // 绑定this，防止success的this丢失
		fn(this.resolve.bind(this), this.reject.bind(this))	
	}
	// then 接受两个参数（回调函数）（可选），保存为实例属性
  then(success?, fail?){
  	this.success = success
  	this.fail = fail
  }
}

2.7 如果then的参数不是函数，则忽略——A+规范2.2.1

 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

// test/index.ts
it("then方法的第一个参数不是函数，则忽略", ()=>{
  // 正常执行，不报错即可
	const p = new MyPromise((resolve, reject)=>{
    resolve()
    reject()
  })
  p.then(false, null)
})

// src/promise.ts
export default class MyPromise {
	success = null
	fail = null
  resolve(){
    setTimeout(() => {
      // 如果success是函数，再调用success
      if(typeof this.success === 'function'){
      	this.success()  
      }
    }, 0)
  }
  reject(){
    setTimeout(() => {
      if(typeof this.fail === 'function'){
      	this.fail()  
      }  
    }, 0)
  }
	constructor(fn){
		if(typeof fn !== "function"){
			throw new Error('我只接受函数啊')
		}
		fn(this.resolve.bind(this), this.reject.bind(this))	
	}
  then(success?, fail?){
    // 添加判断
    if(typeof success === 'function'){
      	this.success = success
    }
    if(typeof fail === 'function'){
      this.fail = fail
    }
  }
}

2.8 success函数必须在promise 完成(fulfilled)后被调用,并把promise 的值作为它的第一个参数；完成(fulfilled)之前绝对不能被调用；绝对不能被调用超过一次——A+规范2.2.2

 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

// test/index.ts
it("success函数必须在promise完成(fulfilled)后被调用,并把promise的值作为它的第一个参数；完成(fulfilled)之前绝对不能被调用；绝对不能被调用超过一次", (done)=>{
	const success = sinon.fake()
  const p = new MyPromise((resolve, reject)=>{
    // 断言在resolve之前不会调用success
    assert.isFalse(success.called)
    resolve(233)
    resolve(111)
    setTimeout(()=>{
      // 断言状态变为了fulfilled
      assert(p.state === 'fulfilled')
      // 断言状态变更后调用success回调，且只调用一次
      assert(success.calledOnce)
      // 断言success调用时的参数为resolve的值
      assert(success.calledWith(233))
      // 异步测试结束
      done()
    }, 0)
  })
  p.then(success)
})

// src/promise.ts
export default class MyPromise {
	success = null
	fail = null
	// 状态，默认pending
	state = 'pending'
  resolve(result){
    setTimeout(() => {
      // 防止多次调用
      if(this.state !== 'pending') return
      // 在执行success前，变更状态为fulfilled
      this.state = 'fulfilled'
      if(typeof this.success === 'function'){
        // 接收resolve1的值作为参数
      	this.success(result)  
      }
    }, 0)
  }
  reject(reason){
    setTimeout(() => {
      if(this.state !== 'pending') return
      this.state = 'rejected'
      if(typeof this.fail === 'function'){
      	this.fail(reason)  
      }  
    }, 0)
  }
	constructor(fn){
		if(typeof fn !== "function"){
			throw new Error('我只接受函数啊')
		}
		fn(this.resolve.bind(this), this.reject.bind(this))	
	}
  then(success?, fail?){
    if(typeof success === 'function'){
      	this.success = success
    }
    if(typeof fail === 'function'){
      this.fail = fail
    }
  }
}

2.9 在我们的代码执行结束后，再执行success回调——A+规范2.2.4

 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

// test/index.ts
it("在我们的代码执行结束之前，不得调用then中的两个函数", (done)=>{
	const success = sinon.fake()
  const p = new MyPromise((resolve)=>{
		resolve()
  })
  p.then(success)
  // 断言success不会被执行
  assert.isFalse(success.called)
  setTimeout(()=>{
    // 待同步代码执行完毕后，断言success执行
    assert(success.called)
		done()
  }, 0)
})

// src/promise.ts
export default class MyPromise {
	// 在resolve中，由于success的执行本来就是异步的（setTimeout）
  // 所以自然满足测试用例
  resolve(result){
    setTimeout(() => {
      if(this.state !== 'pending') return
      this.state = 'fulfilled'
      if(typeof this.success === 'function'){
      	this.success(result)  
      }
    }, 0)
  }
}

2.10 then的两个函数只能以函数形式调用，即内部this指向undefined——A+规范2.2.5

 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

// test/index.ts
it("then的两个函数只能以函数形式调用，即内部this指向undefined", (done)=>{
  const p = new MyPromise((resolve)=>{
		resolve()
  })
  p.then(function(){
  	"use strict"
  	assert(this === undefined)
    done()
  })
})

// src/promise.ts
export default class MyPromise {
	// 原来调用success回调时采用的方式是this.success()
	// 会自动将this实例传入success
  // 所以利用call改变this指向即可
  success = null
  fail = null
  resolve(result){
    setTimeout(() => {
      if(this.state !== 'pending') return
      this.state = 'fulfilled'
      if(typeof this.success === 'function'){
      	this.success.call(undefined, result)  
      }
    }, 0)
  }
  reject(reason){
    setTimeout(() => {
      if(this.state !== 'pending') return
      this.state = 'rejected'
      if(typeof this.fail === 'function'){
      	this.fail.call(undefined, reason)  
      }
    }, 0)
  }
}

2.11 then可以在同一个promise中多次调用，且依据then的顺序调用——A+规范2.2.6

 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

// test/index.ts
it("then可以在同一个promise中多次调用，且依据then的顺序调用", (done)=>{
  const p = new MyPromise((resolve)=>{
		resolve()
  })
  const callback = [sinon.fake(), sinon.fake(), sinon.fake()]
  p.then(callback[0])
  p.then(callback[1])
  p.then(callback[2])
  // 断言三个都被调用了
  setTimeout(()=>{
    assert(callback[0].called)
    assert(callback[1].called)
    assert(callback[2].called)
    // 断言调用顺序
    assert(callback[1].calledAfter(callback[0]))
    assert(callback[2].calledAfter(callback[1]))
    done()
  }, 0)
})

// src/promise.ts
export default class MyPromise {
	// 目前的then只会保留一个success和一个fail，只能实现单次调用
  // 若要实现多次调用，需要将多次的success和fail保存起来
  // 因此利用数组改写
  // success = null
  // fail = null
  callbacks = [];
  state = "pending";
  resolve(result) {
    setTimeout(() => {
      if (this.state !== "pending") return;
      this.state = "fulfilled";
      // forEach按顺序遍历并执行全部handler的第一个函数（success）
      this.callbacks.forEach((handler) => {
        if (typeof handler[0] === "function") {
          handler[0].call(undefined, result);
        }
      });
    }, 0);
  }
  reject(reason) {
    setTimeout(() => {
      if (this.state !== "pending") return;
      this.state = "rejected";
      this.callbacks.forEach((handler) => {
        if (typeof handler[1] === "function") {
          handler[1].call(undefined, reason);
        }
      });
    }, 0);
  }
  constructor(fn) {
    if (typeof fn !== "function") {
      throw new Error("我只接受函数啊");
    }
    fn(this.resolve.bind(this), this.reject.bind(this));
  }
  then(success?, fail?) {
    // 将then的全部参数作为一个handler数组保存
    const handler = [];
    if (typeof success === "function") {
      // 数组的第一个值为成功的回调
      handler[0] = success;
    }
    if (typeof fail === "function") {
      // 数组的第二个值为失败的回调
      handler[1] = fail;
    }
    // 将回调函数推进数组
    this.callbacks.push(handler);
  }
}

3 总结

 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

export default class MyPromise {
  state = "pending";
  callbacks = [];
  resolve(result) {
    setTimeout(() => {
      if (this.state !== "pending") return;
      this.state = "fulfilled";
      this.callbacks.forEach((handler) => {
        if (typeof handler[0] === "function") {
          handler[0].call(undefined, result);
        }
      });
    }, 0);
  }
  reject(reason) {
    setTimeout(() => {
      if (this.state !== "pending") return;
      this.state = "rejected";
      this.callbacks.forEach((handler) => {
        if (typeof handler[1] === "function") {
          handler[1].call(undefined, reason);
        }
      });
    }, 0);
  }
  constructor(fn) {
    if (typeof fn !== "function") {
      throw new Error("我只接受函数");
    }
    fn(this.resolve.bind(this), this.reject.bind(this));
  }
  then(success?, fail?) {
    const handler = [];
    if (typeof success === "function") {
      handler[0] = success;
    }
    if (typeof fail === "function") {
      handler[1] = fail;
    }
    this.callbacks.push(handler);
  }
}