1、修改index.ts

src/index.ts添加取消任务代码:
image.png

2、修改types.ts

src/axios/types.ts添加类型:
image.png

3、添加cancel.ts

src/axios目录下添加cancal.ts文件

  1. export class Cancel {
  2. message: string;
  3. constructor(message: string) {
  4. this.message = message;
  5. }
  6. }
  7. export function isCancel(error: any){
  8. return error instanceof Cancel
  9. }
  10. export class CancelToken {
  11. public resolve: any;
  12. source() {
  13. return {
  14. token: new Promise( (resolve) => {
  15. this.resolve = resolve;
  16. }),
  17. cancel: (message: string) => {
  18. this.resolve(new Cancel(message));
  19. },
  20. };
  21. }
  22. }

4、修改Axios.ts

src/axios/Axios发送请求之前添加对cancelToken是否配置判断:
image.png

5、修改index.ts

src/axios/index将方法绑定在axios上
image.png

6、效果

image.png

7、源代码

代码地址:https://gitee.com/linhexs/handwritten-axios/tree/6.cancel-task/

本章完结!!!