axios封裝（二）-隊列管理

標籤：傳回值   res   hand   fun   his   null   使用者   取消   erro   

在某些特定的情境（比如 立即搜尋 ，表格分頁），會頻繁的發起ajax請求，而由於ajax是非同步API，所以返回的時序並不能夠保證，這時候就需要實現一個ajax隊列，在相同的請求發起時，取消處理上一個請求。

在使用 jquery.ajax 時，可以比較方便的使用 abort 方式中斷處理ajax傳回值，但是由於 axios 是依賴於 promise 的，導致了只能通過轉換為 Promsie.reject 的方式中斷處理。具體的代碼如下：

import axios from ‘axios‘;import Qs from ‘qs‘;// 上一篇文章中定義的錯誤處理檔案import httpErrorHandler from ‘./httpErrorHandler‘;const instance = axios.create();// 請求隊列const queue = [];// axios內建的中斷ajax的方法const cancelToken = axios.CancelToken;// 拼接請求的url和方法，同樣的url+方法可以視為相同的請求const token = (config) =>{  return `${config.url}_${config.method}`}// 中斷重複的請求，並從隊列中移除const removeQueue = (config) => {  for(let i=0, size = queue.length; i < size; i++){    const task = queue[i];    if(task.token === token(config)) {      task.cancel();      queue.splice(i, 1);    }  }}//添加請求攔截器instance.interceptors.request.use(config=>{  removeQueue(config); // 中斷之前的同名請求  // 添加cancelToken  config.cancelToken = new cancelToken((c)=>{    queue.push({ token: token(config), cancel: c });});  return config;}, error => {  return Promise.reject(error);});//添加響應攔截器instance.interceptors.response.use(response=>{  // 在請求完成後，自動移出隊列  removeQueue(response.config);  return response.data}, httpErrorHandler);/** * 封裝後的ajax post方法 * * @param {string} url 請求路徑 * @param {object} data 請求參數 * @param {object} config 使用者自訂設定 * @returns */ function post (url, data, config = {}) => {  return instance.post(url, data, config)}/** * 封裝後的ajax get方法 * * @param {string} url 請求路徑 * @param {object} params 請求參數 * @param {object} config 使用者自訂設定 * @returns */ function post (url, params, config = {}) => {  return instance.get(url, {params}, config)}export default {    post,    get,}

隊列應用

隊列一般結合函數防抖使用，在盡量減少請求次數的情況下，避免傳回值順序的錯誤

$(input).on(‘input‘, evt => {    // 在使用者不斷的輸入過程中，當暫停輸入100ms才發起ajax，在發起ajax的同時，中斷上一個查詢keyword的ajax    debounce(()=>{        get(‘http://baidu.com‘, {keyword: evt.target.value})    })})// 定義一個防抖函數function debounce(fn, step = 100) {    let timeout = null;    return function () {        clearTimeout(timeout);        timeout = setTimeout(() => {            fn.apply(this, arguments);        }, step);    };}

axios封裝（二）-隊列管理