[axios] cancellation 实现原理

第一种请求方法样例：

// 例子：
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

第二种请求方法样例：

// 例子：
const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
cancel();

异步分离的设计方案

通过需求分析，我们知道想要实现取消某个请求，我们需要为该请求配置一个 cancelToken ，然后在外部调用一个 cancel 方法。

请求的发送是一个异步过程，最终会执行 xhr.send 方法，xhr 对象提供了 abort 方法，可以把请求取消，因为我们在外部是碰不到 xhr 对象的，所以我们想在执行 cancel 的时候，去执行 xhr.abort 方法。

现在就相当于我们在 xhr 异步请求的过程中，插入一段代码，当我们在外部执行 cancel 函数的时候，会驱动这段代码的执行，然后执行 xhr.abort 方法取消请求。

    if (cancelToken) {
      // 请求 cancel 函数的时候，promise 的状态从 pending 变为 resolved，从而触发 then 方法的执行
      cancelToken.promise.then(reason => {
        request.abort(); // 调用 xhr 的 abort 方法
        reject(reason);
      })
    }

我们可以利用 Promise 实现异步分离，也就是在 cancelToekn 中保存一个 pending 状态的 Promise 对象，然后当我们执行 cancel 方法的时候，能够访问这个 Promise 对象，把它从 pending 状态变成 resolved 状态，这样我们就可以在 then 函数中去实现取消请求的逻辑。

CancelToken.ts

// reason 即最后用户取消传递的原因

export interface ResolvePromise {
  (reason?: string): void
}

export interface Canceler {
  (message?: string): void
}

// 取消执行器
export interface CancelExecutor {
  (reason: Canceler): void
}

export default class CancelToken {
  promise: Promise<string>
  reason?: string;

  constructor(executor: CancelExecutor) {
    let resolvePromise: ResolvePromise;
    this.promise = new Promise<string>(resolve => {
      resolvePromise = resolve;
    });

    executor((message?: string) => {
      if (this.reason) {
        return
      }
      this.reason = message;
      resolvePromise(this.reason);
    })
  }

  static source() {
    let cancel!: Canceler;
    const token = new CancelToken(function executor(c) {
      cancel = c;
    })
    return {
      token,
      cancel
    }
  }
}

test.ts

import CancelToken from './CancelToken';

// 第一种实现方式 ---------------------
const source = CancelToken.source();

// source.token 通过配置传入 axios，下面方法最终在 xhr 内部实现。
source.token.promise.then((message: string) => {
  console.log('方法一实现，取消原因：', message);
});

// 当调用 cancel 函数的时候，变量 promise 从 pending 状态变为 resolved 状态
source.cancel('method1： Operation cancel by the user');

// ----------------------------------


// 第二种实现方式 ---------------------
let cancel; // 存储 cancel 函数

// cancelToken 为 CancelToken 的实例，实例通过配置传入 axios
const cancelToken = new CancelToken(function executor(c) {
  cancel = c;
})

// 这里的方法最终在 xhr 请求方法里面实现
cancelToken.promise.then((message: string) => {
  console.log('方法二实现，取消原因：', message);
});

// 当调用 cancel 函数的时候，变量 promise 从 pending 状态变为 resolved 状态
cancel('method2： Operation cancel by the user');
// ---------------------------

isCancel 方法

我们发现当发送 cancel 请求的时候，代码会触发 reject 方法使得 axios promise 的状态从 pending 变为 rejected。然后使用 catch 捕获，里面有一个 isCancel 方法原来判断返回值类型是否为 cancel 方法触发产生的异常。

    if (cancelToken) {
      cancelToken.promise.then(reason => {
        request.abort();
        reject(reason);
      })
    }

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  // 这里我们判断 thrown 的类型是否为 Cancel 类型
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

下面我们来实现一下这个 isCancel 方法：
CancelToken.ts

interface ResolvePromise {
  (reason?: Cancel): void
}

export interface Canceler {
  (message?: string): void
}

// 取消执行器
export interface CancelExecutor {
  (reason: Canceler): void
}

export interface Cancel {
  message?: string
}

export class Cancel {
  message?: string

  constructor(message?: string) {
    this.message = message;
  }

}

// axios.isCancel 实现；判断值的类型是否为 Cancel 类型
export function isCancel(value: any): boolean {
  return value instanceof Cancel;
}

export default class CancelToken {
  promise: Promise<Cancel>
  reason?: Cancel;

  constructor(executor: CancelExecutor) {
    let resolvePromise: ResolvePromise;
    this.promise = new Promise<Cancel>(resolve => {
      resolvePromise = resolve;
    });

    executor((message?: string) => {
      if (this.reason) {
        return
      }
      this.reason = new Cancel(message);
      resolvePromise(this.reason);
    })
  }

  static source() {
    let cancel!: Canceler;
    const token = new CancelToken(function executor(c) {
      cancel = c;
    })
    return {
      token,
      cancel
    }
  }
}

test.ts

const source = CancelToken.source();

// source.token 通过配置传入 axios，最终在 xhr 请求方法里面调用。
const request = new Promise((resolve, reject) => {
  source.token.promise.then((value: Cancel) => {
    reject(value);
  });
});
request.catch((thrown: Cancel) => {
  if (isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  }
});

source.cancel('method1： Operation cancel by the user');