关于javascript:axios取消功能详解

50次阅读

共计 5579 个字符,预计需要花费 14 分钟才能阅读完成。

axios提供 CancelToken 办法能够勾销正在发送中的接口申请。

官网提供了两种形式勾销发送,第一种形式如下:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {cancelToken: source.token}).catch(function (thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);
  } else {// handle error}
});

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();

官网实现勾销性能的文件寄存在 /lib/cancel/CancelToken.js

尽管代码不多,然而第一次看真是一头雾水,上面就来抽丝剥茧,一步步还原外面的实现逻辑。

剖析

两种形式都调用了 CancekToken 这个构造函数,咱们就先从这个构造函数开始。

剖析:

第一种形式:

  • CancekToken 提供一个静态方法 sourcesource 办法返回 tokencancel办法

第二种形式:

  • CancekToken 接管一个回调函数作为参数,回调函数接管 cancel 勾销办法

第二种形式更容易动手,咱们能够先实现构造函数 CancekToken,再思考第一种形式静态方法source 的实现。

简易版 axios

首先咱们写个简易版的 axios,不便咱们前面的剖析和调试:

知识点:Promise、XMLHttpRequest

function axios(url,config){return new Promise((resolve,reject)=>{const xhr = new XMLHttpRequest();
    xhr.open(config.method || "GET",url);
    xhr.responseType = config.responseType || "json";
    xhr.onload = ()=>{if(xhr.readyState === 4 && xhr.status === 200){resolve(xhr.response);
      }else{reject(xhr)
      }
    };
    xhr.send(config.data ? JSON.stringify(config.data) : null);
  })
}

CancelToken

第二种形式中,咱们能够看到 CancelToken 在配置参数 cancelToken 中实例化:

axios.get('/user/12345', {cancelToken: new CancelToken});

所以在 axios 中,咱们也会依据配置中是否蕴含 cancelToken 来勾销发送:

function axios(url,config){return new Promise((resolve,reject)=>{const xhr = new XMLHttpRequest();
    ...
    if(config.cancelToken){
      // 如果存在 cancelToken 参数
      // xhr.abort() 终止发送工作
      // reject() 走 reject 办法}
    ...

回到配置参数,CancelToken承受一个回调函数作为参数,参数蕴含勾销的 cancel 办法,咱们初始化 CancelToken 办法如下:

function CancelToken(executor){let cancel = ()=>{};
  executor(cancel)
}

回到官网例子,例子中参数 cancel 办法被赋值给以后环境的 cancel 变量,于是以后环境 cancel 变量指向 CancelToken 办法中的 cancel 函数表达式。

let cancel;
axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {cancel = c; // 指向 CancelToken 中的 cancel 办法})
});

接下来 cancel 办法一旦被执行,就能触发申请终止。

听起来是不是很相熟!

就是公布订阅嘛!

这里官网源码奇妙的应用了 Promise 链式调用的形式实现,咱们给 CancelToken 办法返回一个 Promise 办法:

function CancekToken(executor){let cancel = ()=>{};
  const promise = new Promise(resolve => cancel = resolve);
  executor(cancel);
  return promise;
}

接下来只有用户执行 cancel 办法,配置参数 cancelToken 取得的 Promise 办法就能响应了:

let cancel;
axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {cancel = c; // 指向 CancelToken 中的 cancel 办法})
});
// 执行
+ cancel("canceled request");

axios 中响应 cancel(Promise) 办法:

function axios(url,config){return new Promise((resolve,reject)=>{const xhr = new XMLHttpRequest();
    ...
    if(config.cancelToken){
+       config.cancelToken.then(reason=>{+        xhr.abort();
+        reject(reason);
      })
    }
    ...

关键点是把 Promise.resolve 从函数外部抽出来,奇妙的实现了异步拆散

到了这里,第二种办法的勾销性能就根本实现了。

CancekToken.source

source作为 CancekToken 提供的静态方法,返回 tokencancel 办法。

cancel办法跟后面的性能是一样的,能够了解成部分环境外面申明好 cancel 再抛出来。

咱们再来看看第二种形式 token 在配置中的应用:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {cancelToken: source.token // token 返回的是 CancelToken 实例})

依据后面的配置咱们能够晓得 source.token 实际上返回的是 CancelToken 实例。

理解 source 办法须要返回的对象性能后,就能够轻松实现 source 办法了:

CancekToken.source = function(){let cancel = ()=>{};
  const token = new CancekToken(c=>cancel = c);

  return {
    token,
    cancel
  }
}

axios.isCancel

通过上的代码咱们晓得,勾销申请会走 reject 办法,在 Promise 中能够被 catch 到,不过咱们还须要判断 catch 的谬误是否来自勾销办法,这里官网提供了 isCancel 办法判断:

axios.get('/user/12345', {cancelToken: source.token}).catch(function (error) {
  // 判断是否 勾销操作
  if (axios.isCancel(error)) {}});

在 js 中咱们能够通过 instanceof 判断是否来自某个构造函数的实例,这里新建 Cancel 办法来治理勾销发送的信息:

function Cancel(reason){this.message = reason;}

CancekToken.source 返回的 cancel 办法通过函数包装,实例化一个 Cancel 作为勾销参数:

CancekToken.source = function(){-  let cancel = ()=>{};
-  const token = new CancekToken(c=>cancel = c);
  
+ let resolve = ()=>{};
+  let token = new CancekToken(c=>resolve = c);

  return {
    token,
-    cancel,
+   cancel:(reason)=>{
+     // 实例化一个小 cancel,将 reason 传入
+     resolve(new Cancel(reason))
+   }
  }
}

最终 Promise.catch 到的参数来自实例 Cancel,就能够很容易的判断error 是否来自 Cancel 了:

function isCancel(error){return error instanceof Cancel}
// 将 `isCancel` 绑定到 axios
axios.isCancel = isCancel

最初,官网还判断了 CancelToken.prototype.throwIfRequested,如果调用了cancel 办法,具备雷同 cancelToken 配置的 ajax 申请也不会被发送,这里能够参考官网代码的实现。

全副代码

最初是全副代码实现:

function Cancel(reason) {this.message = reason}

function CancekToken(executor) {
  let reason = null
  let resolve = null
  const cancel = message => {if(reason) return;
    reason = new Cancel(message);
    resolve(reason)
  }
  const promise = new Promise(r => (resolve = r))
  executor(cancel)
  return promise
}

CancekToken.source = function() {let cancel = () => {}
  let token = new CancekToken(c => (cancel = c))

  return {
    token,
    cancel
  }
}

const source = CancekToken.source()

axios('/simple/get', {cancelToken: source.token}).catch(error => {if (axios.isCancel(error)) {console.log(error)
  }
})

source.cancel('canceled http request 1')

let cancel
axios('/simple/get', {
  cancelToken: new CancekToken(c => {cancel = c})
}).catch(error => {if (axios.isCancel(error)) {console.log(error)
  }
})
cancel('canceled http request 2')

function axios(url, config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()
    xhr.open(config.method || 'GET', url)
    xhr.responseType = config.responseType || 'json'

    if (config.cancelToken) {
      config.cancelToken.then(reason => {xhr.abort()
        reject(reason)
      })
    }

    xhr.onload = () => {if (xhr.readyState === 4 && xhr.status === 200) {resolve(xhr.response)
      } else {reject(xhr)
      }
    }
    xhr.send(config.data ? JSON.stringify(config.data) : null)
  })
}

axios.isCancel = function(error) {return error instanceof Cancel}

es6 繁难版本的实现:

export class Cancel {
    public reason:string;
    constructor(reason:string){this.reason = reason}
}
export function isCancel(error:any){return error instanceof Cancel;}
export class CancelToken {
    public resolve:any;
    source(){
        return {
            token:new Promise(resolve=>{this.resolve = resolve;}),
            cancel:(reason:string)=>{this.resolve(new Cancel(reason).reason)
            }
        }
    }
}

正文完
 0