[axios] cancellation 实现原理

官网链接: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
  reason?: string;

  constructor(executor: CancelExecutor) {
    let resolvePromise: ResolvePromise;
    this.promise = new Promise(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
  reason?: Cancel;

  constructor(executor: CancelExecutor) {
    let resolvePromise: ResolvePromise;
    this.promise = new Promise(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');

你可能感兴趣的:([axios] cancellation 实现原理)